两度之间的旋转箭头

编程问答 2022-06-10

问题描述

这是我想要箭头作用的伪造的量规

This is the fake gauge I want the arrow to work on

我希望红线/指针随机产生0-100％的湿度。

HTML：

//variables 

let hygrometerHand = document.querySelector("#hygrometerHand");
const button = document.querySelector("#button");
let hygrometerangle = 0;
hygrometerHand = 0;

//function

function generateResult() {
  let min = -100;
  let max = 95;
  let x = Math.random() * (max - min) + min;
  hygrometerHand = x;
  hygrometerHand.style.transform = `rotate(${hygrometerHand}deg)`;
}

//button and event listener to generate moisture reading

button.addEventListener("click",generateResult);
<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <Meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div id="clock-container">
      <img src="https://i.stack.imgur.com/3z72xm.jpg" />
      <div id="hygrometerHand"></div>
    </div>
    <div>
      <button id="button">Click here</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

请对此提供帮助！我知道答案可能会很简单，但这是我在训练营学习JS的第二周，我的想法太繁琐了。

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

event-listenerfunctionfunctionfunctionjavascriptvariablesvariables