window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function() { var oSunline = document.getElementsByClassName("sun-line"); for (let i = 0; i < 9; i++) { if (oSunline[i].style.animationPlayState === 'paused') { oSunline[i].style.animationPlayState = 'running'; } else { oSunline[i].style.animationPlayState = 'paused'; } } } }为什么我的按钮只能控制一次
时间: 2024-03-13 07:43:00 浏览: 21
您的按钮只能控制一次是因为您在控制太阳线动画状态时,使用了 `animationPlayState` 属性。该属性用于获取或设置动画的播放状态,可取值为 `paused` 或 `running`。在您的代码中,当您点击按钮时,您遍历所有的太阳线元素,并根据其 `animationPlayState` 属性值来判断是否需要暂停或播放动画。但是,当您第二次点击按钮时,所有太阳线元素的 `animationPlayState` 值都已经被设置为 `paused`,因此您的代码无法再次控制它们的动画状态。
为了解决这个问题,您可以考虑使用一个变量来记录当前动画状态,例如:
```
window.onload = function() {
var oBtn = document.getElementById("btn");
var isPaused = false; // 记录动画状态
oBtn.onclick = function() {
var oSunline = document.getElementsByClassName("sun-line");
for (let i = 0; i < oSunline.length; i++) {
if (isPaused) { // 如果动画状态为暂停,则播放动画
oSunline[i].style.animationPlayState = 'running';
} else { // 如果动画状态为播放,则暂停动画
oSunline[i].style.animationPlayState = 'paused';
}
}
isPaused = !isPaused; // 反转动画状态
}
}
```
在这个代码中,我们使用了一个布尔变量 `isPaused` 来记录当前动画状态。每次点击按钮时,我们遍历所有的太阳线元素,并根据 `isPaused` 的值来判断是否需要暂停或播放动画。同时,我们通过 `isPaused = !isPaused` 来反转动画状态。这样,每次点击按钮时,我们都可以正确地控制太阳线元素的动画状态。