JavaScript倒计时栏的实现

最新推荐文章于 2022-11-04 16:21:43 发布

司_尘

最新推荐文章于 2022-11-04 16:21:43 发布

阅读量255

点赞数

分类专栏：前端文章标签： JavaScript 倒计时栏 Data类型 setInterval()方法

本文链接：https://blog.csdn.net/qq_40833779/article/details/84111312

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

这边小编也是刚刚过完双11呀（快递还没有到很绝望），剁完手来写上这新学的知识。双十一很多电商网站随处可见倒计时的框图那他们到底是怎样实现的时刻计时。

主要用法在于对js中Data对象的方法，话不多说直接撸上代码，主要难点在于对每一项时间的获取

<style>
    #countdown{
        margin: 200px auto;
        font-size: 20px;
        text-align: center;
        color: red;
    }
</style>
 <script>
     window.onload=function(){
         var enddata=new Date("2018/12/12 00:00:00"); //这边是自定义的截止时间
         var div=document.getElementById("countdown");
         function hold(){
             var nowtime=new Date();    //每一次执行获取当前时间
             var second=parseInt((enddata.getTime()-nowtime.getTime())/1000);
             var minute=parseInt(second/60%60);
             var hour=parseInt(second/3600%24);
             var day=parseInt(second/3600/24);
             second=second%60;
             second<10 ? second="0"+second : second;  //此下四行确保格式每一位数都是标准的两位
             minute<10 ? minute="0"+minute : minute;
             hour<10 ? hour="0"+hour : hour;
             day<10 ? day="0"+day : day;
             div.innerHTML="距离双十二开抢还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒";  
         }
         setInterval(hold,1000);    //每一秒执行一次，这边第二个参数为毫秒单位
     }
 </script>
<body>
<div id="countdown"></div>
</body>

效果图如下（动态变化）：

主要在于setInterval(); 方法，其余部分小编已经写上了备注，当然这边只是简单的写了一下样式。

司_尘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript倒计时栏的实现

这边小编也是刚刚过完双11呀（快递还没有到很绝望），剁完手来写上这新学的知识。双十一很多电商网站随处可见倒计时的框图那他们到底是怎样实现的时刻计时。主要用法在于对js中Data对象的方法，话不多说直接撸上代码，主要难点在于对每一项时间的获取&lt;style&gt; #countdown{ margin: 200px auto; font-size...
复制链接

扫一扫

专栏目录