我想在单击打开按钮时旋转风扇图像。
单击关闭按钮，旋转停止。
我的代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<img id="myFan" src="fan.png" width="200" heigh="100"><br>
<button onclick="turnOn()"> On </button><br>
<button onclick="turnOff()"> Off </button>
<script>
function turnOn() {
var x = document.getElementById("myFan");
}
function turnOff() {
var x = document.getElementById("myFan");
}
</script>
</body>
</html>
试试这个（由于某种原因图像没有显示）：
let timer;
let turn = 0;
function turnOn() {
timer = setInterval(turnFan, 200);
let x = document.getElementById("on");
x.disabled = true;
}
function turnOff() {
clearInterval(timer);
let x = document.getElementById("on");
x.disabled = false;
}
function turnFan() {
let x = document.getElementById("myFan");
turn += 60;
x.style.transform = "rotate("+ (turn % 360) +"deg)"
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<img id="myFan" src="http://www.pngmart.com/files/7/Ceiling-Fan-PNG-Transparent-Image.png" width="200" heigh="100"><br>
<button id="on" onclick="turnOn()"> On </button><br>
<button id="off" onclick="turnOff()"> Off </button>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
