倒计时案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload=function(){
            function showTime(){
                var div = document.querySelectorAll('div');
                var nowT = +new Date(); 
                var endT = new Date('2019-10-19 12:00:00');
                var startT = (endT - nowT) / 1000; //开始时间 秒
                var d = parseInt(startT / 60 / 60 / 24);
                d = d<10?"0"+d:d;
                div[0].innerHTML=d;
                var h = parseInt(startT / 60 / 60 %24 );
                h = h < 10 ? "0" + h : h;
                div[1].innerHTML=h;
                var m = parseInt(startT / 60 % 60);
                m = m < 10 ? "0" + m : m;
                div[2].innerHTML=m;
                var s = parseInt(startT % 60 );
                s = s < 10 ? "0" + s : s;
                div[3].innerHTML=s;
            }
            setInterval(showTime);
        }       
    </script>
    <style>
        div{
            width: 50px;
            height: 60px;
            background: black;
            display: inline-block;
            line-height: 60px;
            font-size: 28px;
            color: cornsilk;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id='d'></div>
    <div id="h"></div>
    <div id="m"></div>
    <div id='s'></div>
    
</body>
</html>

 

posted @ 2019-10-17 13:10  晴天宝宝i  阅读(120)  评论(0)    收藏  举报