js写倒计时--代码详解

最新推荐文章于 2024-10-06 12:17:25 发布

yezi__626

最新推荐文章于 2024-10-06 12:17:25 发布

阅读量5.6k

点赞数 2

本文链接：https://blog.csdn.net/yezi__6/article/details/82055573

版权

利用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>