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

文章目录

  • 一个简单数字时钟

一个简单数字时钟

HTML & CSS & JavaScript - 一个简单数字时钟_第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>

你可能感兴趣的:(HTML,&,CSS,&,JavaScript,javascript,css,html)