使用HTML与JavaScript结合实现动态时间显示。1. 用<time>标签语义化标记时间，通过id="current-time"占位；2. JavaScript的updateTime()函数获取当前时间并格式化为中文样式，填充到<time>标签内，并设置datetime属性为ISO格式；3. 调用setInterval(updateTime, 1000)每秒更新一次，实现动态刷新；4. 完整示例包含HTML结构、中文本地化格式和实时更新逻辑，确保时间持续跳动显示。
要在HTML页面中显示当前时间日期，并实现动态更新，可以结合使用HTML结构与JavaScript脚本。虽然HTML提供了<time>标签用于语义化表示时间，但它本身不会自动更新。真正的动态效果需要JavaScript来实现。
1. 使用HTML time标签进行语义化标记
<time>标签用于定义日期或时间，有助于搜索引擎和辅助技术识别时间信息。它可以包含机器可读的格式（通过datetime属性）和人类可读的显示文本。
示例：
<p>发布于：<time datetime="2024-04-05T08:30">2024年4月5日 上午8:30</time></p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>
对于当前时间的初始显示，也可以先用<time>占位：
<time id="current-time"></time></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/758" title="Nanonets"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6db6adbfa5954.png" alt="Nanonets" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/758" title="Nanonets">Nanonets</a>
<p>基于AI的自学习OCR文档处理，自动捕获文档数据</p>
</div>
<a href="/ai/758" title="Nanonets" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
2. 使用JavaScript获取并显示当前时间
通过JavaScript可以获取系统当前时间，并格式化后插入到页面中。以下是一个简单函数，用于生成格式化的日期时间字符串。
function updateTime() {
const now = new Date();
const formattedTime = now.toLocaleString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('current-time').textContent = formattedTime;
document.getElementById('current-time').dateTime = now.toISOString();
}</p>
调用该函数即可填充时间：
<script> updateTime(); // 页面加载时立即显示一次 </script></p>
3. 动态实时更新时间
为了让时间持续更新，可以使用setInterval每隔一秒重新调用updateTime()函数。
<script> updateTime(); // 初始显示 setInterval(updateTime, 1000); // 每秒更新一次 </script></p>
这样页面上的时间就会像时钟一样实时跳动。
4. 完整示例代码
将以上部分整合成一个完整可用的HTML片段：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>动态时间显示</title>
</head>
<body>
<p>当前时间：<time id="current-time"></time></p>
<script>
function updateTime() {
const now = new Date();
const formattedTime = now.toLocaleString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('current-time').textContent = formattedTime;
document.getElementById('current-time').dateTime = now.toISOString();
}
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html></p>
基本上就这些。HTML的<time>提供语义支持，JavaScript负责动态获取和刷新时间。两者结合，既规范又实用。
