JavaScript 实现 HTML 页面实时时钟显示

作者:交互手记时间:2026-10-25 12:41:49浏览:478

本文介绍如何在 HTML 页面中使用 JavaScript 获取并显示实时时间。通过创建 Date 对象提取年月日及星期,利用字符串拼接格式化输出,并借助 setInterval 函数每秒刷新 DOM 元素,实现网页内容的动态更新。

JavaScript 实现 HTML 页面实时时钟显示

本文提供了一段使用 JavaScript 在 HTML 页面中展示实时时间的完整代码示例,供读者参考与学习。

具体实现步骤如下:

1. 在script中建立方法time; 2. 创建新的Date对象date,并通过使用Date的内置方法给year、month等赋值; 3. 通过连接符号将各个时间连接起来; 4. 使用document.getElementById("time").innerHTML将其显示到HTML主页中; 5. 使用setInterval设置动态更新时间,即实时时间;

在编码过程中需注意以下几点:

第一,获取年份时应使用 getFullYear 方法;第二,Date 对象返回的月份是从 0 开始计数的,因此实际显示时需加 1;第三,获取星期几时返回的是数字,可通过 switch 语句进行转换,或参考下文代码中的 charAt 方法将其转换为中文星期表示;第四,对于时、分、秒若需保持两位数格式,可在数值前补零。

完整的参考代码如下:

<html>
    <head>
        <meta charset="UTF-8">
        <title>日期和时间</title>
        <script>
            function time(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                var week = date.getDay();
                week="星期"+"日一二三四五六".charAt(week);
                /*switch(week){
                    case 1:
                        week="星期一";
                        break;
                    case 2:
                        week="星期二";
                        break;
                    case 3:
                        week="星期三";
                        break;
                    case 4:
                        week="星期四";
                        break;
                    case 5:
                        week="星期五";
                        break;
                    case 6:
                        week="星期六";
                        break;
                    case 0:
                        week="星期日";
                        break;
                }*/
                var hour =date.getHours();
                hour=hour<10?"0"+hour:hour;
                var minute =date.getMinutes();
                minute=minute<10?"0"+minute:minute;
                var second = date.getSeconds();
                second=second<10?"0"+second:second;
                var currentTime = year+"-"+month+"-"+day+"  "+week+"   "+hour+":"+minute+":"+second;
                document.getElementById("time").innerHTML=currentTime;
            }
            setInterval("time()",1000);
        </script>
    </head>
    <body onload="time()">
        <span id="time"></span>
    </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章