悠悠楠杉
网站页面
HTMLDOMsetInterval和clearInterval方法案例详解
06/29
1. 基础概念与语法
setInterval(function, delay)：
- 参数：
function是要重复执行的函数；delay是时间间隔，以毫秒为单位（1000毫秒等于1秒）。 - 返回值：返回一个唯一的ID（intervalID），这个ID可以被传递给
clearInterval()来取消这个定时器。
clearInterval(intervalID)：
- 参数：
intervalID是由setInterval()返回的唯一标识符。 - 作用：停止由
intervalID指定的定时器。
2. 实例：显示当前时间
以下是一个简单的HTML和JavaScript示例，展示了如何使用 setInterval 和 clearInterval 来每秒更新页面上的时间显示。
HTML部分：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时显示时间</title>
</head>
<body>
<div id="time">显示时间...</div>
<button id="stopBtn">停止时间显示</button>
<script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>
JavaScript部分 (script.js)：
javascript
// 定义一个函数来更新时间显示
function updateTime() {
const now = new Date(); // 获取当前时间
const timeString = now.toLocaleTimeString(); // 将时间转换为适合显示的格式
document.getElementById('time').textContent = timeString; // 更新页面上的时间显示
}
// 设置定时器，每秒调用一次 updateTime 函数来更新时间显示
const intervalID = setInterval(updateTime, 1000); // 1000毫秒=1秒
// 获取停止按钮的元素并为其添加点击事件监听器，当点击时停止时间显示
document.getElementById('stopBtn').addEventListener('click', function() {
clearInterval(intervalID); // 通过 intervalID 停止定时器，不再更新时间显示
});
3. 操作说明与效果展示：
- 当页面加载时，每秒会自动更新页面上的时间显示。你可以看到时间的不断变化。
- 点击“停止时间显示”按钮后，页面上的时间将不再更新，这表明
clearInterval方法成功停止了定时器。
4. 注意事项：
- 使用
setInterval时，注意合理设置延迟时间，避免对用户造成不必要的干扰或影响页面性能。 - 使用
clearInterval时确保其间隔ID正确且有效，否则可能无法正确停止定时器。 - 在实际应用中，合理利用这两个方法可以创建更加动态和交互性强的网页体验。
通过上述示例和解释，你应该对HTML DOM中的 setInterval 和 clearInterval 方法有了更深入的理解和掌握。在实际开发中，你可以根据具体需求灵活运用这两个方法来实现各种周期性任务和功能。
