Javascript countdown timer that stops when window

2019-01-27 04:39发布

站内问答 / PHP
961 2 5

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

2条回答
兄弟一词,经得起流年.
2楼-- · 2019-01-27 04:43

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

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
3楼-- · 2019-01-27 04:47

In regards to your first question about detecting if the window is out of focus, see this answer: Is there a way to detect if a browser window is not currently active?

It is possible, but only very new browsers support this so it may not be useful based on current browser support.

To trigger PHP code from Javascript, you would have to make an AJAX call to a server-side PHP script to invoke PHP since JS is client-side and PHP is server-side.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)