仿京东倒计时案例

代码冗余程度较高哈，随便写的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        display: inline-block;
        height: 100px;
        width: 100px;
        color: azure;
        background-color: black;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
    }
</style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        function h(time){
            var nowTime= +new Date();
            var inputTime= +new Date(time)
            var times=(inputTime-nowTime)/1000;
            var h=parseInt(times/60/60%24);
            h = h<10 ?'0'+h:h;
            var m=parseInt(times/60%60);
            m = m<10 ?'0'+m:m;
            var s=parseInt(times%60);
            s = s<10 ?'0'+s:s;
            return h;
        }
        function m(time){
            var nowTime= +new Date();
            var inputTime= +new Date(time)
            var times=(inputTime-nowTime)/1000;
            var h=parseInt(times/60/60%24);
            h = h<10 ?'0'+h:h;
            var m=parseInt(times/60%60);
            m = m<10 ?'0'+m:m;
            var s=parseInt(times%60);
            s = s<10 ?'0'+s:s;
            return m;
        }
        function s(time){
            var nowTime= +new Date();
            var inputTime= +new Date(time)
            var times=(inputTime-nowTime)/1000;
            var h=parseInt(times/60/60%24);
            h = h<10 ?'0'+h:h;
            var m=parseInt(times/60%60);
            m = m<10 ?'0'+m:m;
            var s=parseInt(times%60);
            s = s<10 ?'0'+s:s;
            return s;
        }
        
        var body=document.querySelector('body');
        var div=document.querySelectorAll('div');
        setInterval(() => {
            body.children[0].innerHTML=h('2022-10-15 10:0:0');
            body.children[1].innerHTML=m('2022-10-15 10:0:0');
            body.children[2].innerHTML=s('2022-10-15 10:0:0');
        }, 1000);
    </script>
</body>
</html>
还不是很会，差不多这个意思就行。
仿京东倒计时案例

猜你喜欢
