js倒計時

場景:給一個終點的時間戳。比如明天或者后天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秒跡象。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容