这段代码利用 setInterval 实现了一个简单的动画，当用户点击按钮时，页面上的方块会向右移动，直到到达一定的边界为止。
实现效果：
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方块运动示例</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
button {
width: 100px;
height: 50px;
margin-bottom: 20px;
font-size: 16px;
background-color: lightblue;
border: none;
cursor: pointer;
}
#box {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
top: 100px;
left: 50px;
}
</style>
</head>
<body>
<button id="btn">开始移动</button>
<div id="box"></div>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var timer = null;
btn.onclick = function() {
clearInterval(timer); // 清除之前的定时器
timer = setInterval(function() {
// 检查是否到达边界
if (box.offsetLeft >= window.innerWidth - box.offsetWidth - 50) {
clearInterval(timer); // 到达边界，停止动画
} else {
box.style.left = box.offsetLeft + 5 + 'px'; // 向右移动5像素
}
}, 30); // 每30毫秒执行一次
}
</script>
</body>
</html>部分代码解析：
下面是对 JavaScript 部分的详细解析：
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var timer = null;
btn.onclick = function() {
clearInterval(timer);
timer = setInterval(function() {
if (box.offsetLeft >= window.innerWidth - box.offsetWidth - 50) {
clearInterval(timer);
} else {
box.style.left = box.offsetLeft + 5 + 'px';
}
}, 30);
}
1. 变量声明：
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var timer = null;
btn：通过document.getElementById获取页面上的按钮元素。box：获取运动的方块元素。timer：初始化为null，用于存储定时器的 ID。
2. 按钮点击事件：
btn.onclick = function() {
- 为按钮绑定一个点击事件处理函数，当按钮被点击时调用此函数。
3. 清除定时器：
clearInterval(timer);
- 在每次点击按钮时，先清除之前的定时器，防止多次点击导致多个定时器同时运行，造成方块加速移动。
4. 设置定时器：
timer = setInterval(function() {
- 使用
setInterval创建一个新的定时器，每 30 毫秒执行一次指定的匿名函数，这个函数负责控制方块的移动。
5. 判断方块是否到达边界：
if (box.offsetLeft >= window.innerWidth - box.offsetWidth - 50) {
clearInterval(timer);
} else {
box.offsetLeft表示方块距离其包含块左边的距离（即方块的当前水平位置）。window.innerWidth是浏览器窗口的宽度。box.offsetWidth是方块的宽度。- 通过上述运算，判断方块的左侧已到达窗口右边缘的 50 像素以内。如果条件成立，清除定时器，即停止运动。
6. 移动方块：
box.style.left = box.offsetLeft + 5 + 'px';
- 如果方块没有到达边界，则将方块的
left属性增加 5 像素，从而使方块每次定时器触发时移动 5 像素。
