我想在单击打开按钮时旋转风扇图像。 单击关闭按钮，旋转停止。
我的代码是:
<!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>关于javascript - 如何在 JavaScript 中旋转图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51167628/