页面实时显示当前时间

最新推荐文章于 2024-07-01 21:38:11 发布

原创最新推荐文章于 2024-07-01 21:38:11 发布 · 1.5w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何在网页上实现实时更新当前时间的前端示例代码，通过JavaScript实现页面上的时间动态显示。

学习目标：

在页面上实时显示当前的时间

学习内容：

前端demo代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div class="head">
    <div><span id="showTime"></span></div>
</div>
<script>
    var t = null;
    t = setTimeout(time, 1000);
    function time() {
        clearTimeout(t);
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000);
    }
</script>
</body>
</html>