小时钟案例

最新推荐文章于 2024-10-17 09:52:22 发布

Lekily

最新推荐文章于 2024-10-17 09:52:22 发布

阅读量89

点赞数

分类专栏： js 文章标签： JavaScript Date对象动态时钟界面设计实时更新

本文链接：https://blog.csdn.net/y1506778504/article/details/119177916

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过日期对象Date()来实现一个小时钟案例

 	<style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    
        #wrap {
            width: 400px;
            margin: 200px auto;
            /*border: 1px solid red;*/
            user-select: none;
        }
    
        #wrap ul {
            display: flex;
        }
        #wrap li {
            margin: 0 3px;
        }
    
        #wrap .time {
            /*background-color: pink;*/
            transition: top 0.3s;
        }
        #wrap li:not(.dot) {
            width: 100%;
            height: 62px;
            background: linear-gradient(to bottom, #434343 50%, #393939 50%);
            border-radius: 10px;
            line-height: 62px;
            text-align: center;
            color: #fff;
            font-size: 26px;
        }
    
        #wrap .dot {
            width: 20px;
            height: 62px;
            line-height: 62px;
            text-align: center;
            font-size: 26px;
            font-weight: bolder;
        }
    </style>
    </head>
    <body>
        <div id="wrap">
            <ul>
                <li class="hours">0</li>
                <li class="hours">0</li>
                <li class="dot">:</li>
                <li class="minutes">0</li>
                <li class="minutes">0</li>
                <li class="dot">:</li>
                <li class="seconds">0</li>
                <li class="seconds">0</li>
            </ul>
        </div>
    
        <script>
            let aLi = document.querySelectorAll("#wrap li:not(.dot)");
    
            //变化函数
            function fn() {
                let date = new Date();
    
                /*获取时分秒*/
                let h = date.getHours().toString();
                let m = date.getMinutes().toString();
                let s = date.getSeconds().toString();
                let str =  toTwo(h) + toTwo(m) + toTwo(s);
                console.log(str);
                for (let i = 0; i < str.length; i++) {
                    aLi[i].innerHTML = str[i];
                }
            }
            fn();
            setInterval(fn , 1000);
    
            /*个位补0*/
            function toTwo(number) {
                return (number < 10 ? "0" : "") + number;
            }
    
    
       </script>