仿京东倒计时案例

最新推荐文章于 2023-12-21 13:56:50 发布

小韦的案例小窝

最新推荐文章于 2023-12-21 13:56:50 发布

阅读量104

点赞数 1

文章标签： html html5 css

本文链接：https://blog.csdn.net/weiyuyang250/article/details/120756020

版权

代码冗余程度较高哈，随便写的

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

还不是很会，差不多这个意思就行。

小韦的案例小窝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
仿京东倒计时案例

代码冗余程度较高哈，随便写的<!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">
复制链接

扫一扫