Question

我正在尝试使用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>

clock hand

Answer 1

我投票结束了这个问题，因为这个问题只是一个错字，但我还是想像往常一样用一个有效的秒针来发布此代码段...

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>

模拟时钟的指针不旋转

1 个答案: