使用js 定时器在HTML的input标签中设置显示实时时间的方记录：

最新推荐文章于 2023-04-14 16:40:07 发布

xw-何妨吟啸且徐行

最新推荐文章于 2023-04-14 16:40:07 发布

阅读量755

点赞数

CC 4.0 BY-SA版权

文章标签： html js javascript

本文链接：https://blog.youkuaiyun.com/xuw_xy/article/details/111237281

该博客展示了如何使用HTML和JavaScript在网页中创建一个实时更新的时钟。通过设置定时器，JavaScript函数每秒更新input标签的值，显示当前日期和时间。用户还可以点击‘停止’按钮来关闭定时器，停止时间的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用js 定时器在HTML的input标签中设置显示实时时间的方记录：

1、效果图（实时的）：

2、代码如下（可直接运行）：

<html>

<body>

    <input type="text" id="clock" />
    <script type="text/javascript">
        var int = self.setInterval("clock()", 1000);

        function clock() {

            var date = new Date();
            var dateString = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "  " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();


            document.getElementById("clock").value = dateString;
        }
    </script>

    <button onclick="int=window.clearInterval(int)">停止</button>

</body>

</html>