HTML & CSS & JavaScript - 一个简单数字时钟

最新推荐文章于 2023-11-16 10:35:40 发布

好好活着，不要熬夜

最新推荐文章于 2023-11-16 10:35:40 发布

阅读量2.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_29761395/article/details/125811297

版权

HTML & CSS & JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

文章目录

一个简单数字时钟

一个简单数字时钟

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>一个简单的数字时钟</title>
        <style type="text/css">
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            body {
                background: linear-gradient(#000000, #841010);
                /* background-color: #000; */
                width: 100%;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .container {
                /* border: 1px solid red; */
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                user-select: none;
                font-family: "courier new";
                font-size: 120px;
                font-weight: 600;
                letter-spacing: 2px;
                color: rgba(255, 255, 255, 1);
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
    </body>

    <script type="text/javascript">
        window.onload = (event) => {
            // console.log(event);
            main();
        }

        function main() {
            const p = document.querySelector(".container");
            
            showDatetime(p);
            
            window.setInterval(() => {
                showDatetime(p);
            }, 1000);
        }
        
        function showDatetime(target) {
            const date = new Date();
            console.log(date);
            console.log(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
            
            const year = date.getFullYear();
            const month = date.getMonth();
            const dayOfMonth = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            
            dateString = `${year}.${padZero(month, 2, true)}.${padZero(dayOfMonth, 2, true)}`;
            timeString = `${padZero(hours, 2, true)}:${padZero(minutes, 2, true)}:${padZero(seconds, 2, true)}`;
            
            // target.innerText = `${dateString} ${timeString}`;
            target.innerText = `${timeString}`;
            console.log(target.innerText);
        }
        
        function padZero(target, targetLength, atStart) {
            if (typeof target === "number") {
                if (target < 10) {
                    target = target.toString();
                } else {
                    return target;
                }
            }
            
            if (target.length === targetLength) {
                return target;
            }
            
            if (atStart === true) {
                return target.padStart(targetLength, "0");
            } else {
                return target.padEnd(targetLength, "0");
            }
        }
    </script>
</html>