当前位置：网站首页>页面动态显示时间（升级版）

页面动态显示时间（升级版）

2022-04-23 06:24:00 【资深咸鱼~】

实现按钮控制时间展示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面动态显示时间</title>
</head>

<body>
    <div>
        <p class="p1"></p>
        <button class="btn">停止时间</button>
    </div>
    <script>
        //格式：2020年04月12日 10:20:00 星期二
        var p1 = document.querySelector(".p1")
        var btn = document.querySelector(".btn")
        var timerId = setInterval(format, 1000)
        var flag = true
        function format() {
            var newDate = new Date()
            var day = newDate.getDay()
            var y = newDate.getFullYear()
            var m = (newDate.getMonth() + 1) < 10 ? "0" + (newDate.getMonth() + 1) : (newDate.getMonth() + 1)
            var d = newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate()
            var h = newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours()
            var min = newDate.getMinutes() < 10 ? "0" + newDate.getMinutes() : newDate.getMinutes()
            var s = newDate.getSeconds() < 10 ? "0" + newDate.getSeconds() : newDate.getSeconds()

            var dict = {
                1: "一",
                2: "二",
                3: "三",
                4: "四",
                5: "五",
                6: "六",
                0: "天",
            }
            //var week=["日","一","二","三","四","五","六"]
            var matDate = y + "年" + m + "月" + d + "日" + h + ":" + min + ":" + s + " 星期" + dict[day]
            p1.textContent = matDate
        }
        btn.onclick = function () {
            if (flag) {
                //停止时间
                clearInterval(timerId)
                btn.textContent = "开始时间"
                timerId = null
                flag = false
            } else {
                btn.textContent = "停止时间"
                timerId = setInterval(format, 1000)
                flag = true
            }
        }
    </script>
</body>

</html>

效果展示：

 

 

版权声明
本文为[资深咸鱼~]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_51644702/article/details/124119552

边栏推荐

猜你喜欢

随机推荐