Javascript循环倒计时 - javascript recurrent countdown

javascript recurrent countdown

本文关键字：倒计时循环 Javascript | 更新日期: 2023-09-27

我有一个关于倒计时计时器的问题。我有下面的代码，显示一个视觉倒计时。我的问题是，它重置每次我刷新页面，它的客户端。是否有办法使下面的服务器端和重启时，它达到零?

<script>
    var interval;
    var minutes = 1;
    var seconds = 5;
    window.onload = function() {
        countdown('countdown');
    }
    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
    </script>
<div id='countdown'></div>

以上代码可以在这里找到:
Javascript倒计时

您确定计数器必须在服务器端吗?如果你只是想在浏览器刷新时保持倒计时，你可以使用cookie

// Setting cookie after every second, using the jQuery cookie plugin http://plugins.jquery.com/project/cookie
$.cookie("minutes", current_minutes_left);
$.cookie("seconds", current_seconds_left);
// Retrieve cookie later
$.cookie("minutes");
$.cookie("seconds");
// do something with the cookies

应该可以了。

Just set

var minutes = 1;
var seconds = 5;

由服务器脚本根据结束时间进行倒计时。

例子:

在服务器端(PHP会话)存储倒计时结束时刻的日期时间
根据客户端(不同时区)偏移量的存储值计算倒计时时间
将计算值写入输出HTML

重新加载时，只需根据存储的值重新计算倒计时时间。

就是这样!