JavaScript【一个简单的音乐播放器】点击图片自动旋转并且

作者: by依白 | 来源:发表于2023-09-29 01:47 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            @keyframes dt {
                0% {
                    transform: rotate(0);
                }

                50% {
                    transform: rotate(180deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            #musicImg {
                animation: dt 0s linear infinite;
            }
        </style>
    </head>
    <body>
        <div>
            <audio id="mui" src="media/BGM.mp3">
            </audio>
            <img id="musicImg" src="img/nu1/yytb.png" alt="">

        </div>
        <script>
            let musicImg = document.getElementById("musicImg");
            let mui = document.getElementById("mui");
            let zt = true;
            musicImg.onclick = function() {
                if (zt) {
                    musicImg.style.animation = "dt 2s linear infinite forwards";
                    mui.play();
                    zt = false;
                } else {
                    musicImg.style.animation = "dt 0s linear infinite forwards";
                    mui.pause();
                    zt = true;
                }
            }
        </script>
    </body>
</html>