如何使用 Javascript 函数连续旋转照片

Question

我正在尝试找出在 Javascript 中连续旋转图像的逻辑。到目前为止，我已经想到了这段代码。 img1 是图像的 ID，到目前为止它可以工作，但只旋转一次。如何让它在我每次点击时旋转？我正在使用 onclick 事件。

function rotateProfilePic() {
            var image = document.getElementById('img1');
            image.style.transform = "rotate(180deg)";
        } 

抱歉，如果这个问题对某些人来说太简单了，我是 Web 编程的初学者。

Answer 1

将您的函数设置为图片上的点击侦听器：

const imgTag = document.getElementById("img1");
const rotateStep = 180; // rotation size
let curImgAngle = 0;


function rotateProfilePic() {
  curImgAngle += rotateStep;
  imgTag.style.transform = `rotate(${curImgAngle}deg)`;
} 

imgTag.addEventListener("click", rotateProfilePic);