如何在HTML中插入时间日期显示_HTML时间标签与JavaScript动态更新-html教程-PHP中文网

如何在HTML中插入时间日期显示_HTML时间标签与JavaScript动态更新

蓮花仙者

发布： 2025-10-19 13:09:02

原创

177人浏览过

使用HTML与JavaScript结合实现动态时间显示。1. 用<time>标签语义化标记时间，通过id="current-time"占位；2. JavaScript的updateTime()函数获取当前时间并格式化为中文样式，填充到<time>标签内，并设置datetime属性为ISO格式；3. 调用setInterval(updateTime, 1000)每秒更新一次，实现动态刷新；4. 完整示例包含HTML结构、中文本地化格式和实时更新逻辑，确保时间持续跳动显示。

如何在html中插入时间日期显示_html时间标签与javascript动态更新

要在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>”；</p>

登录后复制

对于当前时间的初始显示，也可以先用<time>占位：

<time id="current-time"></time></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1169">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680099816784.png" alt="美间AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1169">美间AI</a>
                            <p>美间AI：让设计更简单</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="美间AI">
                                <span>45</span>
                            </div>
                        </div>
                        <a href="/ai/1169" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="美间AI">
                        </a>
                    </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负责动态获取和刷新时间。两者结合，既规范又实用。

以上就是如何在HTML中插入时间日期显示_HTML时间标签与JavaScript动态更新的详细内容，更多请关注php中文网其它相关文章！