倒计时案例

Posted 2021-03-25 qtbb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了倒计时案例相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于倒计时案例的主要内容，如果未能解决你的问题，请参考以下文章

如何在使用片段和计时器的选项卡式活动上更新 UI

倒计时广告关闭案例实现 js js小技巧

Vue-antd实现手机号和验证码验证登录-60s禁用倒计时-案例

js倒计时案例

java 24小时倒计时案例