其他分享
首页 > 其他分享> > 编写js,通过使用Date对象实现活动截止时间的倒计时的效果

编写js,通过使用Date对象实现活动截止时间的倒计时的效果

作者:互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



    <style>
        .box{
            margin: 0 auto;
            position: relative;
            background: url(../img/2.jpg) no-repeat 170px 60px;
            width: 800px;
            height: 422px;
            /* border: 1px solid tomato; */
        }
        .box .box_find{
            width: 280px;
            height: 50px;
            /* border: 1px solid red; */
            position: absolute;
            left: 300px;
            top: 360px;
        }
        .box .box_find div{
            width: 40px;
            height: 40px;
            float: left;
            line-height: 40px;
            text-align: center;
            color: red;      
            margin-left: 8px;        
            background: turquoise;
            
        }
    </style>


    <script>
        window.onload = function(){
            var endsec = (new Date("2020,12,31 23:59:59")).getTime();//getTime()将时间格式化为毫秒数----------截止时间
            var id = setInterval(sec,1000);
            var d=h=m=s=0;
            function sec(){
                var startsec = (new Date()).getTime();//获取当前时间
                var remain = parseInt((endsec-startsec)D/1000);//剩余时间——————当前单位是秒

                if(remain>0){//秒杀是否结束
                    d = parseInt(remain/60/60/24);//获取剩余天数
                    h = parseInt((remain/60/60)%24);//小时
                    m = parseInt((remain/60)%60);//分钟
                    s = parseInt(remain%60);//秒

                    d = d<10? "0"+d : d;
                    h = h<10? "0"+h : h;
                    m = m<10? "0"+m : m;
                    s = s<10? "0"+s : s;

                }else{
                    clearInterval(id);
                    d=h=m=s="00";
                }
                document.getElementById("d").innerHTML= d;
                document.getElementById("h").innerHTML= h;
                document.getElementById("m").innerHTML= m;
                document.getElementById("s").innerHTML= s;

            }
        }
    </script>


</head>
<body>
    
    <div class="box">
        <div class="box_find">
            <div id="d"></div>
            <div id="h"></div>
            <div id="m"></div>
            <div id="s"></div>
        </div>
    </div>



</body>
</html>

标签:box,60,var,innerHTML,js,倒计时,parseInt,remain,Date
来源: https://blog.csdn.net/qq_45696288/article/details/111460536