本文详解如何修复 javascript 中因变量名错误和 css 属性误用导致的旋转失效问题，提供可复用的 dom 元素批量旋转方案，并强调 `transform: rotate()` 的正确用法与状态管理要点。
在 Web 开发中，常需通过用户交互（如点击）触发动画效果。一个典型需求是：点击某个按钮（例如圆形元素），使页面中一组指定形状同步旋转。但初学者常因两个关键错误导致功能异常——变量名拼写错误与CSS 属性名误用，正如示例中出现的 ReferenceError: deg is not defined 和 arak[i].style.rotate 无效赋值。
首先，核心错误分析：
- deg 未声明 → 实际应为已定义的变量 Degree；
- element.style.rotate 是无效属性 → 正确的 CSS 变换属性是 element.style.transform，且必须传入完整函数字符串，如 'rotate(45deg)'。
其次，逻辑优化建议：
- 使用 document.querySelectorAll('.example') 替代 getElementsByTagName('div')，可精准选取目标元素，避免误操作其他无关 <div>；
- 将 Degree += 10 放在循环体内（如 forEach 中），确保每次点击时每个目标元素都叠加相同角度增量，实现同步旋转；
- 若需独立控制各元素角度，可改用数组存储各元素角度值；但本例目标是“整体一致旋转”，故共享累加变量更合理。
以下是修正后的完整代码示例：
<style>
.example {
width: 60px;
height: 60px;
margin: 8px;
background-color: #4a90e2;
border-radius: 50%; /* 呈现为圆形 */
transition: transform 0.3s ease; /* 添加平滑过渡 */
}
.button {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 20px;
font-weight: bold;
}
</style>
<div onclick="RotateDiv(this)" class="button">↻ Rotate</div>
<div class="example s1"></div>
<div class="example s2"></div>
<div class="example s3"></div>
<div class="example s4"></div>
<script>
let Degree = 0;
function RotateDiv() {
const targets = document.querySelectorAll('.example');
targets.forEach(el => {
Degree += 10;
el.style.transform = `rotate(${Degree}deg)`;
});
}
</script>⚠️ 注意事项：
- 避免全局变量污染：Degree 当前为全局变量，若页面存在多组旋转逻辑，建议封装为闭包或使用 data-* 属性维护状态；
- 重置角度需求：如需支持“重置旋转”，可添加 ResetDiv() 函数将 Degree 置零并清除 transform；
- 性能提示：高频点击可能导致角度值溢出（如超过 3600°），虽不影响显示，但可考虑 Degree %= 360 保持数值简洁；
- 现代替代方案：对于复杂动画，推荐使用 CSS @keyframes + animation 或 requestAnimationFrame，但本例的 JS 控制方式简洁直观，适合教学与轻量交互。
通过以上修正，点击按钮即可稳定、同步地旋转所有标记为 .example 的元素，且代码具备良好的可读性与可维护性。
