时间戳

首页 > 解决方案 > 倒计时结束后如何停止倒计时计时器刷新

javascript - 倒计时结束后如何停止倒计时计时器刷新

问题描述

在你们得出结论之前，不，我不希望我的倒数计时器在每次页面刷新后停止自行重置。我已经通过搜索使用 cookie 的解决方案来处理该部分。然而，在我的倒计时结束后，即到达 00:00:00 后，它又从 23:59:59 重新开始。

我知道这是一个逻辑错误，因此我无法找到任何适当的解决方案。这是代码，倒计时 1 分钟：

<html>
<body>
<div id="hms">00:01: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>

到达 00:00:00 后，计时器重新开始。所有帮助将不胜感激！:)

标签： javascripthtmljspcookies

解决方案

var fiveSeconds = new Date().getTime() + 5000;
$('#spanTimer').countdown(fiveSeconds)
    // removed the elapsed: true
    .on('update.countdown', function(event) {
        var $this = $(this);
        if (event.elapsed) {
            $this.html(event.strftime('After end: <span>%H:%M:%S</span>'));
        } else {
            $this.html(event.strftime('To end: <span>%H:%M:%S</span>'));
        }
    })
    // added a finish.countdown callback, to
    //  hide the countdown altogether and
    //  have a little fun.
    .on('finish.countdown', function(){
      $(this).hide();
      $("#boomRoom").show();
    });
#boomRoom {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js"></script>

<div id="spanTimer">
</div>
<div id="boomRoom">
  <img src="http://bestanimations.com/Military/Explosions/atomic-mushroom-cloud-explosion-2-2.gif"/>
  </div>

推荐阅读