php - Javascript countdown timer that stops when window is not in focus

Question

Welcome To Ask or Share your Answers For Others

php - Javascript countdown timer that stops when window is not in focus

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

php - Javascript countdown timer that stops when window is not in focus

Ok , I'm having trouble to solve this , I'm a php / C# web developer , and have no experience or knowledge in Javascript, I have to do just this one thing that needs Javascript:

When a certain page loads, a counter starts. The client must stay on this page for 20 seconds. after, I want to execute php code.

So there are 2 issues concerning me, first: how do I stop the counter, if client leaves the page (meaning the page is not in focus).

2) How can I execute php in javascript? , or call a php function from Javascript.

The code I have so far is this:

<html>
<head>
</head>

<body>
<div id='timer'>
<script type="text/javascript">

COUNTER_START = 20

function tick () {
    if (document.getElementById ('counter').firstChild.data > 0) {
        document.getElementById ('counter').firstChild.data = document.getElementById ('counter').firstChild.data - 1
        setTimeout ('tick()', 1000)
    } else {
        document.getElementById ('counter').firstChild.data = 'done'
    }
}

if (document.getElementById) onload = function () {
    var t = document.createTextNode (COUNTER_START)
    var p = document.createElement ('P')
    p.appendChild (t)
    p.setAttribute ('id', 'counter')

    var body = document.getElementsByTagName ('BODY')[0]
    var firstChild = body.getElementsByTagName ('*')[0]

    body.insertBefore (p, firstChild)
    tick()
}

</script>
</div>
</body>
</html>

and I also want the timer to start ticking when the client gets back on page

Thank you very much for ur help in advance

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:56:14+0000

You could do this using jQuery.
Recycling an old Stackoverflow post, try this:

var window_focus;
var counter = 1000;

// on focus, set window_focus = true.
$(window).focus(function() {
    window_focus = true;
});

// when the window loses focus, set window_focus to false
$(window).focusout(function() {
    window_focus = false;
});

// this is set to the ('click' function, but you could start the interval/timer in a jQuery.ready function: http://api.jquery.com/ready/
$(document).one('click',function() {
    // Run this function every second. Decrement counter if window_focus is true.
    setInterval(function() {
        $('body').append('Count: ' + counter + '<br>');
        if(window_focus) { counter = counter-1; }
    }, 1000);
});

Demo and old post
DEMO | Old So post

Update
Probably because the demo runs in 4 iframes, the $(window).focus bit only works on the iframe actually running the code (the bottom-right window).

jQuery
jQuery.com (How jQuery works) | Example (back to basics halfway down the page) | If you use the 2nd link, also read this

Categories

php - Javascript countdown timer that stops when window is not in focus

php - Javascript countdown timer that stops when window is not in focus

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags