当前位置：网站首页>Page dynamic display time (upgraded version)

Page dynamic display time (upgraded version)

2022-04-23 07:45:00 【Senior salted fish~】

Realize button control time display 

<!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> Page dynamic display time </title>
</head>

<body>
    <div>
        <p class="p1"></p>
        <button class="btn"> Stop time </button>
    </div>
    <script>
        // Format ：2020 year 04 month 12 Japan  10:20:00  Tuesday 
        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: " One ",
                2: " Two ",
                3: " 3、 ... and ",
                4: " Four ",
                5: " 5、 ... and ",
                6: " 6、 ... and ",
                0: " God ",
            }
            //var week=[" Japan "," One "," Two "," 3、 ... and "," Four "," 5、 ... and "," 6、 ... and "]
            var matDate = y + " year " + m + " month " + d + " Japan " + h + ":" + min + ":" + s + "  week " + dict[day]
            p1.textContent = matDate
        }
        btn.onclick = function () {
            if (flag) {
                // Stop time 
                clearInterval(timerId)
                btn.textContent = " Starting time "
                timerId = null
                flag = false
            } else {
                btn.textContent = " Stop time "
                timerId = setInterval(format, 1000)
                flag = true
            }
        }
    </script>
</body>

</html>

Effect display ：

 

 

版权声明
本文为[Senior salted fish~]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230623086896.html

边栏推荐

猜你喜欢

随机推荐