JavaScript實現動態數字時鐘

Posted on by

本文實例為大傢分享瞭JavaScript實現動態數字時鐘的具體代碼，供大傢參考，具體內容如下

實現效果

代碼實現

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;

        }

        #box {
            width: 1000px;
            height: 300px;
            background-image:url(1.jpg);
            line-height: 300px;
            text-align: center;
            font-size: 50px;
            font-weight: 500;
            margin: 100px auto;

        }
    </style>

</head>

<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box')

        //不足十位補零
        let addZero = val => val < 10 ? '0' + val : val

        //把阿拉伯數字的星期轉化為中國漢字的星期 // 星期映射表
        let trans = val => {
            let obj = {
                0: '日',
                1: '一',
                2: '二',
                3: '三',
                4: '四',
                5: '五',
                6: '六'
            }
            return obj[val]
        }
        setTime ()
        //獲取時間的方法
        function setTime() {
            let time = new Date();
            let year = time.getFullYear(); // 獲取年
            let month = time.getMonth() + 1; // 獲取月（是從0到11，所以我們要給他加1）
            let date = time.getDate(); // 獲取日
            let day = time.getDay(); // 獲取星期幾(0是星期日)
            let hour = time.getHours(); // 獲取小時
            let min = time.getMinutes(); // 獲取分鐘
            let sec = time.getSeconds(); // 獲取秒

            let value = year + '年' + addZero(month) + '月' + addZero(date) + '日 星期' + trans(day) + ' '+addZero(hour) +
                '時' + addZero(min) + '分' + addZero(sec) + '秒'
            // 把所有的時間拼接到一起
            box.innerText = value
            // console.log(value)
            // 把拼接好的時間插入到頁面

        }
        // 讓定時器每間隔一秒就執行一次setTime這個方法（這是實現時鐘的核心）
        setInterval(setTime, 1000)
    </script>
</body>

</html>

素材

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet

推薦閱讀：