使用JavaScript的Date对象结合setInterval实现网页实时时间显示，通过HTML容器展示，可自定义格式并用CSS美化样式。
如果您希望在网页上实时显示当前时间，可以通过JavaScript结合HTML实现动态更新。以下是几种常见的实现实时时间显示的方法：
一、使用JavaScript的Date对象动态生成时间
通过JavaScript内置的Date对象获取当前系统时间，并将其格式化后插入到指定的HTML元素中。这种方法简单直接，适合大多数基础场景。
1、在HTML中创建一个用于显示时间的容器元素，例如：。
2、编写JavaScript代码获取当前时间并格式化输出：
立即学习“前端免费学习笔记（深入）”；
const now = new Date();
document.getElementById("time").textContent = now.toLocaleString();
二、使用setInterval实现时间自动刷新
为了让时间持续更新，可以利用setInterval函数定时执行时间更新操作，使页面上的时间每秒刷新一次。
1、定义一个更新时间的函数，将格式化后的时间写入页面元素。
2、使用setInterval每1000毫秒（即1秒）调用一次该函数：
function updateTime() {
const now = new Date();
document.getElementById("time").textContent = now.toLocaleString();
}
setInterval(updateTime, 1000);
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
三、自定义时间格式化样式
若需要特定的时间显示格式（如“YYYY年MM月DD日 HH:mm:ss”），可通过手动拼接Date对象的年、月、日、时、分、秒值来实现个性化输出。
1、从Date对象中提取年月日和时分秒：
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
2、组合成所需格式并更新到页面：
const formattedTime = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
document.getElementById("time").textContent = formattedTime;
四、结合CSS美化时间显示效果
通过CSS设置字体大小、颜色、背景等样式，提升时间显示的视觉效果，使其更符合页面整体设计风格。
1、为时间容器添加class或id，例如：。
2、在style标签中定义样式规则：
#clock {
font-size: 24px;
color: #006400;
font-family: Arial, sans-serif;
background-color: #f0f8ff;
padding: 10px;
border-radius: 5px;
}
