纯JS实现JS倒计时，最小单位为毫秒

有时候网站上需要JS倒计时效果，尤其是一些活动的倒计时或者说买活动产品的时候就需要JS倒计时，为了倒计时的准时性我建议大家从服务器上获取时间，然后再去减少时间。

JS倒计时一般都是天、时、分、秒、毫秒，这样去显示的、如果是一般的活动最小的单位分钟就可以了，抢购活动的话需要到秒或者毫秒了。

这次的JS倒计时时间比较着急，所以也没有进行包装，往后有时间会进行包装一下，下面的代码对于一般的JS倒计时还是可以的，比如说活动的倒计时还是可以用。

点击最下方的按钮进行运行。

<div id="cgl_time">
    <span>00天</span>
    <span>00时</span>
    <span>00分</span>
    <span>00秒</span>
    <span>00毫秒</span>
</div>
<script>
(function () {
    var cgl_time = document.getElementById('cgl_time');//时间的外box
    var cgl_times = cgl_time.getElementsByTagName('span');//放置天、时、分、秒
    var endtime= new Date('2018/01/22 20:20:00');//最终时间
    var begintime = new Date('2017/12/22 16:10:00');//当前时间 ---> 需要从服务器获取，千万不要获取本地时间，你不知道你的用户是什么群体，真的
    var timec = endtime.getTime() - begintime.getTime();//相差时间
    var shuaxin = 100;//刷新时间，刷新时间和每次减少的时间是一样的，建议数值是100
    cgl_time_run = setInterval(function () {
        /**
         *console需要删除，IE浏览器会报错
         * */
        //console.log('最终时间：' + endtime.getTime())
        //console.log('当前时间：' + begintime.getTime())
        //console.log('相差时间：' + timec);
        //console.log('时时相差：' + timec);
        //本文原链接：http://cenggel.com/
        timec-=shuaxin;//每次减少1秒
        /**
         * 初始化数值*/
        var d=0;//天数
        var h=0;//时
        var m=0;//分
        var s=0;//秒
        var r=0;//秒
        /**开始走判断的
         * */
        if( timec >= 0){
            /**
             * 取余计算*/
            d=Math.floor(timec/1000/60/60/24);//计算天数
            h=Math.floor(timec/1000/60/60%24);//计算时数
            m=Math.floor(timec/1000/60%60);//计算分数
            s=Math.floor(timec/1000%60);//计算秒数
            r=Math.floor(timec%1000)/10;//计算秒数
            /**
             * 各个数保持2两位*/
            if(h<10){h="0" + h}
            if(m<10){m="0" + m}
            if(s<10){s="0" + s}
            if(r<10){r="0" + r}
            /**
             * 输出时间*/
            cgl_times[0].innerHTML = d + "天";
            cgl_times[1].innerHTML = h + "时";
            cgl_times[2].innerHTML = m + "分";
            cgl_times[3].innerHTML = s + "秒";
            cgl_times[4].innerHTML = r;
        }else{
            /**
             * 倒计时完成后输出文字，使用clearInterval来停止倒计时*/
            cgl_time.innerHTML = "倒计时已经结束！";
            clearInterval(cgl_time_run);
        }
    },shuaxin);
})();
</script>
<style type="text/css">
body{ background:#999;}
#cgl_time{ text-align:center; font-size:80px; line-height:400px;}
</div>

运行

后期会对代码进行更新个升级，有其他想法的同学可以留言哦。