精简时间JS的代码量

最新推荐文章于 2024-09-02 10:21:44 发布

与妖为邻

最新推荐文章于 2024-09-02 10:21:44 发布

阅读量120

点赞数 2

文章标签： html 前端 javascript 时间精简代码量

本文链接：https://blog.csdn.net/lulei5153/article/details/141747788

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间</title>
</head>
<style>
    body {
        background: #0b1b2c;
    }

    #Time {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translate(10%, 20%);
        position: fixed;
        background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 10rem;
        font-weight: 900;
        text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
        sub {
            -webkit-text-fill-color: #cfd601;
            text-shadow: 1px 1px 1px #100000;
            font-size: 5rem;
        }
    }
</style>

<body>
    <div id="Time"></div>
    <script>
        setInterval(() => {
            const d = new Date();
            const timeFormat = n => n.toString().padStart(2, '0');
            document.getElementById("Time").innerHTML = `${d.getFullYear()}年${timeFormat(d.getMonth() + 1)}月${timeFormat(d.getDate())}日 <sub>(星期${"日一二三四五六".charAt(d.getDay())}) </sub>${timeFormat(d.getHours())}:${timeFormat(d.getMinutes())}:${timeFormat(d.getSeconds())}`;
        }, 1000);
    </script>
    <!-- 第一次的代码
    <script>
        function showTime() {//显示当前时间
            var d = new Date();//创建Date对象
            var y = d.getFullYear();//获取当前日期的年份
            var m = d.getMonth() + 1;//获取当前日期的月份，注意月份是从0开始的，所以需要加1
            var W = "星期" + "日一二三四五六".charAt(new Date().getDay());//获取当前日期的星期几
            var D = d.getDate();//获取当前日期的日期（几号）
            var H = d.getHours();//获取当前日期的小时
            var M = d.getMinutes();//获取当前日期的分钟
            var S = d.getSeconds();//获取当前日期的秒
            m = m < 10 ? "0" + m : m;//月份个位补0
            D = D < 10 ? "0" + D : D;//日期个位补0
            H = H < 10 ? "0" + H : H;//时个位补0
            M = M < 10 ? "0" + M : M;//分钟个位补0
            S = S < 10 ? "0" + S : S;//秒个位补0
            const Time = document.getElementById("Time");
            Time.innerHTML = y + '年' + m + '月' + D + '日' + '(' + W + ')' + H + ':' + M + ':' + S;
        }
        showTime();
        setInterval(showTime, 1000); // 每隔1秒执行一次showTime函数   
    </script>
    第2次的代码
    <script>
        function showTime() {
            const d = new Date();
            const y = d.getFullYear();
            const m = (d.getMonth() + 1).toString().padStart(2, '0');
            const W = "星期" + "日一二三四五六".charAt(d.getDay());
            const D = d.getDate().toString().padStart(2, '0');
            const H = d.getHours().toString().padStart(2, '0');
            const M = d.getMinutes().toString().padStart(2, '0');
            const S = d.getSeconds().toString().padStart(2, '0');
            document.getElementById("Time2").innerHTML = `${y}年${m}月${D}日(${W})${H}:${M}:${S}`;
        }
        showTime();
        setInterval(showTime, 1000);
    </script>
    第3次的代码
    <script>
        function showTime() {
            const d = new Date();
            const y = d.getFullYear();
            const m = String(d.getMonth() + 1).padStart(2, '0');
            const W = "星期" + "日一二三四五六".charAt(d.getDay());
            const D = String(d.getDate()).padStart(2, '0');
            const H = String(d.getHours()).padStart(2, '0');
            const M = String(d.getMinutes()).padStart(2, '0');
            const S = String(d.getSeconds()).padStart(2, '0');
            document.getElementById("Time2").innerHTML = `${y}年${m}月${D}日(${W})${H}:${M}:${S}`;
        }
        showTime();
        setInterval(showTime, 1000); 
    </script>-->


</html>