倒计时

前言

最近公司在做电商平台，其中有一个页面就需要倒计时的功能实现。也觉得这个功能会比较常见，所以花点时间总结一下。

1.给定总倒计时秒数，转化为00:00:00 的格式倒计时。

jQuery实现：

<span id="count-down-box"></span>
<script>
   $(function (){
        var oBox = $('#count-down-box');
        var nowTime = 3589;
        function countDown(){
            nowTime--;
            var oSec = nowTime;
        //  当秒数小于等于0时，清除计时器
            if(oSec<=0){
                clearInterval(timerID);
            }
            //转换成小时
            var oHour = parseInt(oSec/3600);
            //转换成分钟
            var oMin = parseInt(oSec%3600/60);
            // 转换成秒
            var oSec = oSec%60;

            // 格式问题：当时、分、秒小于10时，在数字前加“0”
            if(oHour<10){
                oHour="0"+oHour;
            }
            if(oMin<10){
                oMin="0"+oMin;
            }
            if(oSec<10){
                oSec="0"+oSec;
            }
            oBox.html(oHour+':'+oMin+':'+oSec);
        }
        countDown();
        var timerID = setInterval(countDown,1000);
    })
 </script>

2.直接设置到最终时间点（只能设置当天的时间）。

原生JS实现：

<div id="box"></div>
<script>
        window.onload = function(){
            var oBox = document.getElementById('box');
            var oDate = new Date();//获取当前时间;
            //设置最终时间：oDate.setHours(时,分,秒,毫秒);
            oDate.setHours(23,26,0,0);  //表示设置的时间为18点16分
            function countDown(){
                //未来时间戳减去现在时间的时间戳;
                var ms = oDate.getTime() - new Date().getTime();
                if(ms<=0){
                    clearInterval(timerID);
                }
                //毫秒转换成秒
                var oSec = parseInt(ms/1000);
                //转换成小时
                var oHour = parseInt(oSec%86400/3600);
                //转换成分钟
                var oMin = parseInt(oSec%3600/60);
                //转换为秒
                var oSec = oSec%60;
                if(oHour<10){
                    oHour="0"+oHour;
                }
                if(oMin<10){
                    oMin="0"+oMin;
                }
                if(oSec<10){
                    oSec="0"+oSec;
                }
                oBox.innerHTML =oHour+':'+oMin+':'+oSec;
            }
            countDown(60);
            var timerID = setInterval(countDown,1000);
        }
 </script>

3.直接设置最终的时间（可以设置任意的时间）。

原生JS实现：

<div id="box"></div>
<script language="javascript" type="text/javascript">
    function leftTimer(year,month,day,hour,minute,second){
        var ms = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
        if(ms<=0){
            clearInterval(timerID);
        }
        //毫秒转换成秒
        var oSec = parseInt(ms/1000);
        // 转换为天数
        var oDay = parseInt(oSec/86400);
        //转换成小时
        var oHour = parseInt(oSec%86400/3600);
        //转换成分钟
        var oMin = parseInt(oSec%3600/60);
        //转换为秒
        var oSec = oSec%60;
        if(oDay<10){
            oDay="0"+oDay;
        }
        if(oHour<10){
            oHour="0"+oHour;
        }
        if(oMin<10){
            oMin="0"+oMin;
        }
        if(oSec<10){
            oSec="0"+oSec;
        }
        document.getElementById("box").innerHTML = oDay+"天" + oHour+"小时" + oMin+"分"+oSec+"秒";
    }
   window.onload = function () {
       leftTimer();
   }
    var timerID = setInterval("leftTimer(2017,10,18,09,42,0)",1000);
</script>

但是，这种方法还存在着问题，加载时存在会有几秒钟的延迟。

4.倒计时的暂停和重启

<div id="count-down-box"></div>
<div class="pause">暂停</div>
<script>
    $(function (){
        var oBox = $('#count-down-box');
        var nowTime = 3600;
        function countDown(){
            nowTime--;
            var oSec = nowTime;
            //  当秒数小于等于0时，清除计时器
            if(oSec<=0){
                clearInterval(timerID);
            }
            //转换成小时
            var oHour = parseInt(oSec/3600);
            //转换成分钟
            var oMin = parseInt(oSec%3600/60);
            // 转换成秒
            var oSec = oSec%60;
            // 格式问题：当时、分、秒小于10时，在数字前加“0”
            if(oHour<10){
                oHour="0"+oHour;
            }
            if(oMin<10){
                oMin="0"+oMin;
            }
            if(oSec<10){
                oSec="0"+oSec;
            }
            oBox.html(oHour+':'+oMin+':'+oSec);
        }
        var timerID = setInterval(countDown,1000);  //代表1s中执行一次
        var flag = false;
        $(".pause").on("click",function () {
            if(!flag){
                clearInterval(timerID);
                flag = true;
                $(this).html("开始");
            }else{
                timerID = setInterval(countDown,1000);
                flag = false;
                $(this).html("暂停");
            }

        })
    })
</script>

赏

谢谢你请我吃糖果