用JavaScript实现页面显示当前日期和时间的代码

prinrf('千寻)

已于 2023-10-16 00:56:49 修改

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-10-11 00:19:05 首次发布

本文链接：https://blog.csdn.net/m0_56419249/article/details/133758813

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.年月日星期时分秒实现动态刷新
效果图, 每隔一秒动态刷新一次
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function showTime() {

            let time = new Date();
            // 年月日 时分秒
            let year = time.getFullYear();
            let month = time.getMonth();
            let day = time.getDate();
            let hour = time.getHours();
            let minute = time.getMinutes();
            let second = time.getSeconds();
            //星期(0-6)
            let week = time.getDay();
            let weekList = ["日", "一", "二", "三", "四", "五", "六"];


            let timeStr = year + "年" + month + "月" + day + "日" + "星期" + weekList[week] +
                " " + (hour < 10 ? "0" + hour : hour) + ":"
                + (minute < 10 ? "0" + minute : minute) + ":"
                + (second < 10 ? "0" + second : second);

            //放入div标签里
            document.getElementById("showTimeDate").innerHTML = timeStr;
            //设置计时器,递归调用, 1s
            setTimeout("showTime()", 1000);



        }
    </script>
    <style>
        .myTime {
            font-size: 25px;
            height: 50px;
            text-align: center;

        }
    </style>
</head>

<body onload="showTime()">
    <div class="myTime" id="showTimeDate"></div>
</body>

</html>

1.时分秒(12小时制)实现动态刷新
效果图如下, 每隔一秒动态刷新一次
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function showTime() {

            let time = new Date();
            // 时分秒

            let hour = time.getHours();
            let minute = time.getMinutes();
            let second = time.getSeconds();

            // (hour < 10 ? "0" + hour : hour)


            let timeStr = ((hour <= 12 ? (hour <= 10 ? "0" + hour : hour) :
                ((hour - 12) < 10 ? "0" + (hour - 12) : (hour - 12)))) + ":"
                + (minute < 10 ? "0" + minute : minute) + ":"
                + (second < 10 ? "0" + second : second) + " " + (hour <= 12 ? "AM" : "PM");

            //放入div标签里
            document.getElementById("showTimeDate").innerHTML = timeStr;
            //设置计时器,递归调用, 1s
            setTimeout("showTime()", 1000);
        }
    </script>
    <style>
        .myTime {
            font-size: 50px;
            height: 50px;
            text-align: center;
            color: red;

        }
    </style>
</head>

<body onload="showTime()">
    <div class="myTime" id="showTimeDate"></div>
</body>

</html>