JS 实战：精准调控 div 旋转速度及注意事项

在JavaScript里调整`div`旋转速度，可借助CSS动画和JavaScript来控制。下面给出示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 定义旋转动画 */ @keyframes rotateAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #myDiv { width: 100px; height: 100px; background-color: blue; /* 初始不播放动画 */ animation-play-state: paused; } </style> </head> <body> <div id="myDiv"></div> <button id="startButton">开始旋转</button> <button id="changeSpeedButton">改变速度</button> <script> const divElement = document.getElementById('myDiv'); const startButton = document.getElementById('startButton'); const changeSpeedButton = document.getElementById('changeSpeedButton'); // 开始旋转 startButton.addEventListener('click', function () { divElement.style.animationName = 'rotateAnimation'; // 设置初始动画持续时间为3秒 divElement.style.animationDuration = '3s'; divElement.style.animationIterationCount = 'infinite'; divElement.style.animationPlayState = 'running'; }); // 改变旋转速度 changeSpeedButton.addEventListener('click', function () { // 每次点击将动画持续时间减半，加快旋转速度 let currentDuration = parseFloat(divElement.style.animationDuration); if (currentDuration > 0.1) { divElement.style.animationDuration = (currentDuration / 2) + 's'; } }); </script> </body> </html> ``` 代码注释解释： 1. 在CSS中定义了`rotateAnimation`动画，该动画让元素从0度旋转到360度。 2. `#myDiv`元素初始状态下动画是暂停的。 3. 在JavaScript里，通过`addEventListener`监听按钮的点击事件。 4. 点击“开始旋转”按钮时，给`div`元素添加动画，设置动画持续时间为3秒，并且无限循环播放。 5. 点击“改变速度”按钮时，将当前动画持续时间减半，以此加快旋转速度。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 动画持续时间的单位不要遗漏，像`3s`的`s`不能少。 2. 要注意动画持续时间的最小值，避免出现过小的值导致动画速度过快而失去控制。 3. 当使用`animation-play-state`时，要留意元素动画状态的切换，防止出现动画状态混乱的情况。 ######[AI写代码神器 | 687点数解答 | 2025-09-01 12:01:07]

服务商

更多选项

快捷项

自定义