前端：利用js动态显示当前时间

最新推荐文章于 2025-07-10 23:10:30 发布

原创最新推荐文章于 2025-07-10 23:10:30 发布 · 7.6k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#js #动态显示时间 #时间生成

前端专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态显示当前时间的方法，包括日期、星期和时分秒的实时更新。通过设置定时器和补位函数，确保了时间的准确性和格式的规范性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装了一个动态显示当前时间的函数：

效果：

html:

<div id="start" style="height: 50px; width: 100%; background: #000000; color: #fffffff; text-align: center" />

js ：

    $(function () {
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var year = dt.getFullYear();
            var month = dt.getMonth() + 1;//(0-11,0代表1月)
            var date = dt.getDate();//获取天
            var num = dt.getDay();//获取星期
            var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            var hour = dt.getHours();//获取时
            var minute = dt.getMinutes();//获取分
            var second = dt.getSeconds();//获取秒
            //分秒时间是一位数字，在数字前补0。
            date = extra(date);
            month = extra(month);
            minute = extra(minute);
            second = extra(second);
            document.getElementById("start").innerHTML = year + " 年 " + month + " 月 " + date + " 日 " + hour + "：" + minute + "：" + second + " " + weekday[num];
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }

    });
//补位函数。
    function extra(x) {
        //如果传入数字小于10，数字前补一位0。
        if (x < 10) {
            return "0" + x;
        }
        else {
            return x;
        }
    }