倒数计时器,包括小时,分钟和秒

Question

倒数计时器,包括小时,分钟和秒

如何为这个倒计时器设置cookie？当我刷新页面时,cookie应该阻止重置计时器.

<div id="hms">02:00:00</div>
<script type="text/javascript">
    function count() {
        var startTime = document.getElementById('hms').innerHTML;
        var pieces = startTime.split(':');
        var time = new Date();
        time.setHours(pieces[0]);
        time.setMinutes(pieces[1]);
        time.setSeconds(pieces[2]);
        var timedif = new Date(time.valueOf() - 1000);
        var newtime = timedif.toTimeString().split(' ')[0];
        document.getElementById('hms').innerHTML = newtime;
        setTimeout(count,1000);
    }
    count();
</script>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Vin*_*ney 5

问题是如果你在刷新之前在cookie中保存时间并在页面加载后检索它可能与实际当前时间不匹配,因为页面可能需要花费任意时间来刷新,第一次它可能是1秒第二次可能更快对于较慢网络上的用户,由于缓存等因素需要0.5秒,因此可能总是超过1-2秒.因此,页面上的时间将始终滞后,并且在刷新几次后将与实际当前时间不匹配.

看起来我错了浏览器不刷新页面上已有的内容,直到所有必需的资源都被下载,所以你的计数器继续运行以及设置cookie直到它全部准备就绪

这就是我的工作

<html>
<body>
<div id="hms">02:00:00</div>
</body>

<script>
var startTime;
function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
} // credits kirlich @http://stackoverflow.com/questions/10730362/get-cookie-by-name

function count() {
 if(typeof getCookie('remaining')!= 'undefined')
 {
   startTime = getCookie('remaining');
 }
 else if(document.getElementById('hms').innerHTML.trim()!='')
 {
   startTime = document.getElementById('hms').innerHTML;
 }
 else
 {
  var d = new Date(); 
  var h=d.getHours(); 
  var m=d.getMinutes();
  var s=d.getSeconds();
  startTime = h+':'+m+':'+s;
  //OR
  startTime  = d.toTimeString().split(" ")[0]
 }

 var pieces = startTime.split(":");
 var time = new Date();
 time.setHours(pieces[0]);
 time.setMinutes(pieces[1]);
 time.setSeconds(pieces[2]);
 var timediff = new Date(time.valueOf()-1000)
 var newtime = timediff.toTimeString().split(" ")[0];
 document.getElementById('hms').innerHTML=newtime ;
 document.cookie = "remaining="+newtime;
 setTimeout(count,1000);
}
count();
</script>

</html>

Run Code Online (Sandbox Code Playgroud)

PS:尝试并测试倒计时幸存页面刷新,即使在重页限制> 10秒内也准确!

如果您不想要当前时间但输入任何手动时间,您可以随时调整值以获得所需效果.

归档时间：	9 年，11 月前
查看次数：	1777 次
最近记录：	9 年，11 月前