javascript - 如何在 JavaScript 中旋转图像？-6ren

javascript - 如何在 JavaScript 中旋转图像？

转载作者：行者123 更新时间：2023-12-03 01:33:51

我想在单击打开按钮时旋转风扇图像。单击关闭按钮，旋转停止。

我的代码是:

<!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/

文章推荐： javascript - html2canvas无法下载

文章推荐： javascript - 使用 Spectrum Color Picker 设置 freedrawcolor

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 JavaScript 中旋转图像？