JavaScript倒计时栏的实现

这边小编也是刚刚过完双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(); 方法,其余部分小编已经写上了备注,当然这边只是简单的写了一下样式。

猜你喜欢

转载自blog.csdn.net/qq_40833779/article/details/84111312
今日推荐