以下是一个简单的示例代码,演示如何使用JavaScript实现按钮点击时的旋转效果:
HTML代码:
CSS代码:
#rotateButton {
width: 100px;
height: 100px;
background-color: #f00;
color: #fff;
transform: rotate(0deg);
transition: transform 0.5s ease;
}
JavaScript代码:
var rotateButton = document.getElementById('rotateButton');
rotateButton.addEventListener('click', function() {
var currentRotation = parseInt(rotateButton.style.transform.replace('rotate(', '').replace('deg)', ''));
var newRotation = (currentRotation + 45) % 360;
rotateButton.style.transform = 'rotate(' + newRotation + 'deg)';
});
在上面的代码中,我们首先通过getElementById
方法获取按钮元素,并使用addEventListener
方法为按钮添加了一个点击事件监听器。当按钮被点击时,会执行回调函数。在回调函数中,我们通过style.transform
获取当前的旋转角度,并将其转换为整数类型。然后,我们通过计算新的旋转角度(当前角度加上45度,并对360取模)来更新按钮的style.transform
属性,从而实现按钮点击时的旋转效果。
请注意,上述代码中使用了CSS的transition
属性,使按钮的旋转过程平滑进行。
下一篇:按钮点击引发的无限循环