Question

在大家得出结论之前，不，我不希望我的倒数计时器在每次刷新页面后停止自行重置。我已经通过搜索使用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后，计时器重新开始。所有帮助将不胜感激！：）

Answer 1

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>

Answer 2

您需要添加支票if(startTime == "00:00:00") {return;}

尝试一下

<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]
    }
    if (startTime == "00:00:00") {
      return;
    }

    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>

如何在倒数结束后停止倒数计时器的自我更新

2 个答案: