模拟时钟的指针不旋转

钟面

我正在尝试使用 js/css/html 制作一个模拟时钟。

问题是时钟的指针不工作。

从 js 函数内部旋转它似乎不起作用。我尝试从 css 手动更改旋转度，它奏效了。

该功能正在工作，我尝试控制台登录秒值，它起作用了。

function ticktock() {
  var time = new Date();
  var second = time.getSeconds();
  document.getElementsByClassName("clock-hand")[0].style.tranform = 'rotate(54deg)';
  console.log(second);
  setTimeout(ticktock, 1000);
}
ticktock();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid green;
  position: relative;
}
.clock {
  background-image: url(https://i.stack.imgur.com/t1y7j.jpg);
  width: 300px;
  height: 300px;
  background-size: cover;
  border: 2px solid orange;
  position: relative;
}
.clock-hand {
  position: absolute;
  top: 49px;
  left: 51px;
  border: 2px solid violet;
  height: 200px;
  width: 200px;
}

<!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">
  <link rel="stylesheet" href="clock-style.css">
  <title>Document</title>
</head>
<body>
  <h1>time teller</h1>
  <div class="container">
    <div class="clock">
      <img src="https://i.stack.imgur.com/H0zgO.png" alt="clock-hand" class="clock-hand">
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
  </script>
  <script src="clock-logic.js"></script>
</body>
</html>

时钟指针

我投票结束了这个问题，因为这个问题只是一个错字，但我仍然想用工作秒针发布这个片段，因为我无论如何都这样做了......

function ticktock() {
  var time = new Date();
  var second = time.getSeconds();
  document.getElementsByClassName("clock-hand")[0].style.transform = 'rotate(' + (second/60*360) + 'deg)';
  console.log(second);
  setTimeout(ticktock, 1000);
}
ticktock();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid green;
  position: relative;
}
.clock {
  background-image: url(https://i.stack.imgur.com/t1y7j.jpg);
  width: 300px;
  height: 300px;
  background-size: cover;
  border: 2px solid orange;
  position: relative;
}
.clock-hand {
  position: absolute;
  top: 49px;
  left: 51px;
  border: 2px solid violet;
  height: 200px;
  width: 200px;
}

<!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">
  <link rel="stylesheet" href="clock-style.css">
  <title>Document</title>
</head>
<body>
  <h1>time teller</h1>
  <div class="container">
    <div class="clock">
      <img src="https://i.stack.imgur.com/H0zgO.png" alt="clock-hand" class="clock-hand">
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
  </script>
  <script src="clock-logic.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：