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

浏览: 4,711次 日期:2017年12月22日 23:13:56 作者:青格勒

有时候网站上需要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>

 

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

文章链接:http://cenggel.com/js/26.html

版权声明:文章《纯JS实现JS倒计时,最小单位为毫秒》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

邮箱地址不会被公开。 必填项已用*标注