JS 点击按钮让图片旋转90度

在 JavaScript 中，你可以创建一个点击按钮事件，当用户点击按钮时，图片会旋转90度。以下是一个简单的例子，我们使用 `addEventListener` 来监听按钮点击，并使用 CSS 的 `transform` 属性来实现旋转：

首先，确保有一个 HTML 部分包含图片和按钮元素：

<img id="image" src="path/to/image.jpg">
<button id="rotateButton">点击旋转</button>

然后，在 JavaScript 文件中编写如下代码：

// 获取图片和按钮元素
const imageElement = document.getElementById('image');
const rotateButton = document.getElementById('rotateButton');

// 添加点击事件监听器
rotateButton.addEventListener('click', function() {
  // 获取当前旋转角度（默认0度），这里只考虑正方向旋转
  let currentRotation = parseInt(window.getComputedStyle(imageElement).getPropertyValue('transform').split('(')[1].split(')')[0]);

  // 如果已经旋转了最大值（这里是360次，即一圈），则回到原点
  if (currentRotation % 360 === 0) {
    currentRotation = 0;
  } else {
    // 否则，每次旋转增加90度
    currentRotation += 90;
  }

  // 更新图片的 CSS transform 旋转属性
  imageElement.style.transform = `rotate(${currentRotation}deg)`;
});

在这个示例中，每次点击按钮，图片就会顺时针旋转90度，直到旋转了一整圈回到原位。