場景:給一個終點的時間戳。比如明天或者后天12:00:00 為終點時間。然后倒計時,不管頁面刷新與否倒計時不誤差!
實現原理:計算當前的時間戳,用終點時間戳減去當前時間戳。(結果可能是毫秒,如果是毫秒請轉化為秒)計算的結果為妙,將秒轉化為時間,實現倒計時。
<div class="container-fluid main">
<h5>倒計時功能</h5>
<hr>
<a href="" class="btn btn-info timer"></a>
</div>
<script src="/js/jquery.slim.min.js" ></script>
<script type="text/javascript">
function countdown() {//倒計時
end_time=1508227190; //終止時間
var curr_time = parseInt(Date.parse(new Date())/1000);
var diff_time=parseInt(end_time-curr_time);// 倒計時時間差
var h = Math.floor(diff_time / 3600);
var m = Math.floor((diff_time / 60 % 60));
var s = Math.floor((diff_time % 60));
$('.timer').html(h + "時" + m + "分" + s + "秒");
if (diff_time<=0) {
$('.timer').html(0 + "時" + 0 + "分" + 0 + "秒");
};
}
countdown();
var start_time=setInterval('countdown()',1000);
</script>
測試結果:
為0秒的時候自動清除計時,并且為0時0分0秒。開始的時候沒有暫停1秒跡象。