我如何使用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);