js控制專輯圖片旋轉效果

酒暖=發表於2024-05-25
JS

需求

需要透過按鈕控制專輯圖片的旋轉和停止

思路

旋轉：呼叫方法利用定時器控制每20ms將圖片的角度旋轉1°
停止：呼叫方法清除定時器

程式碼

<html>

<head>
    <title>圖片輪轉</title>
    <script>
        window.onload = function () {
            var img = document.getElementById("img")
            var button = document.getElementById("button")
            var num = 0;
            var play;
            //控制音樂播放的方法
            var playMusic = function () {
                //定時器每20ms執行一次
                play = setInterval(
                    function () {
                        //num控制旋轉角度
                        img.style.transform = "rotate(" + num + "deg)"
                        num = num + 1
                        if (num == 360) {
                            num = 0
                        }
                    }, 20)
            }
            //點選控制暫停和播放
            button.onclick = function () {
                if (button.innerText == "播放") {
                    button.innerText = "停止"
                    playMusic()

                } else if (button.innerText == "停止") {
                    button.innerText = "播放"
                    clearInterval(play)
                }
            }

        }
    </script>
</head>

<body>
    <img src="周杰倫.jpeg" alt="" style="width: 300px;height: 300px;border-radius: 150px;" id="img">
    <button id="button">播放</button>
</body>

</html>

相關文章