js写倒计时--代码详解

利用data对象写倒计时:效果如下图
图计较丑,重点是代码哦》。《
  
首先,确定要倒计时的终点时间;再利用setInterval动态获取每一刻的时间,然后将获取的时间转换成秒,分,时,日,月
​
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 200px;
            height: 100px;
            background-color: #0c0c0e;
            color: #fefff3;

        }
        .shi{
            float: left;
            margin-left: 4px;
            padding-top: 30px;
            font-size: 25px;
            width: 60px;
            height: 70px;
            background-color: #000000;
            text-align: center;
        }
    </style>
    <script>
       
        window.onload=function(){
            var gotime=new Date(2018,8,25,22,00);//设置倒计时终点时间
            var b=document.getElementsByClassName ("block")[0];
            setInterval(function(){
                var nowtime=new Date();//获取当前时间
                //下面是将时间差转换成时分秒
                var time_c=(gotime.getTime()-nowtime.getTime())/1000;
                var shi=parseInt(time_c/(60*60)%24);
                var fen=parseInt((time_c/60)%60);
                var miao=parseInt(time_c%60);
                b.innerHTML="<div class='shi'>"+shi+"时"+"</div>"+"<div class='shi'>"+fen+"分"+"</div>"+"<div class='shi'>"+miao+"秒"+"</div>";
            },1)

        }
    </script>
</head>
<body>
<div class="block"></div>
</body>
</html>

​

猜你喜欢

转载自blog.csdn.net/yezi__6/article/details/82055573