需求
需要通过按钮控制专辑图片的旋转和停止
思路
旋转：调用方法利用定时器控制每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>