js创建一个简单的时钟_js写一个时钟-CSDN博客

本文介绍JavaScript的定时事件，包括setTimeout()和setInterval()方法的使用，以及如何用这些方法创建一个实时更新的时钟。同时，还介绍了如何使用clearTimeout()和clearInterval()方法来停止定时器。

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

想要用js创建一个小时钟，首先必须要了解js的Timing 事件：JavaScript 可以在时间间隔内执行，这就是所谓的定时事件。

一、setTimeout()方法

表示在等待指定的毫秒数后执行函数。（可制作延迟效果）

语法：window.setTimeout(function, milliseconds);
第一个参数是要执行的函数，第二个参数指示执行之前的毫秒数。

clearTimeout() 方法

clearTimeout() 方法用于停止执行 setTimeout() 中规定的函数,

语法:window.clearTimeout(timeoutVariable);
clearTimeout() 使用从 setTimeout() 返回的变量：

<button onclick="myVar = setTimeout(myFunction, 2000)">试一试</button>
<button onclick="clearTimeout(myVar)">停止执行</button>

二、setInterval()方法

等同于 setTimeout()，但持续重复执行该函数。

语法：window.setInterval(function, milliseconds);
第一个参数是要执行的函数，第二个参数每个执行之间的时间间隔的长度。

clearInterval() 方法

clearInterval() 方法用于停止 setInterval() 方法中指定的函数的执行。

语法：window.clearInterval(timerVariable);
clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

（这4个方法的window 前缀均可省略）

时钟实现代码：

<!DOCTYPE html>
<html>
<body>
<p>现在是北京时间：</p>
<p id="demo"></p>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
  //toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果。
}
</script>
</body>
</html>

实现效果：
在这里插入图片描述