页面实时显示当前时间

最新推荐文章于 2024-08-28 22:43:07 发布

资深咸鱼~

最新推荐文章于 2024-08-28 22:43:07 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_51644702/article/details/124117682

版权

JavaScript 日期时间格式化实时更新 DOM操作

关键词由CSDN通过智能技术生成

知识点涉及：

1、时间获取和格式设定

2、给标签设定操作事件

3、定时器设置

<!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>Document</title>
</head>

<body>
    <p class="p1"></p>
    <script>
        //格式：2020年04月12日 10:20:00 星期二
        function format(newDate) {
            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=["日","一","二","三","四","五","六"]
            return y + "年" + m + "月" + d + "日" + h + ":" + min + ":" + s + " 星期" + dict[day]
        }
        
        var timerId = setInterval(function(){
            var newDate = new Date()
          document.querySelector(".p1").textContent = format(newDate)
        },1000)
        
    </script>
</body>

</html>

效果图:动态更新