js时钟表盘

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>xxx</title>
    <link rel="stylesheet" href="./index.css" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
  </head>
  <body>
    <div id="warp">
      <div id="clock">
        <div id="number">
          <div><span>9</span></div>
          <div><span>10</span></div>
          <div><span>11</span></div>
          <div><span>12</span></div>
          <div><span>1</span></div>
          <div><span>2</span></div>
          <div><span>3</span></div>
          <div><span>4</span></div>
          <div><span>5</span></div>
          <div><span>6</span></div>
          <div><span>7</span></div>
          <div><span>8</span></div>
        </div>
        <div id="houre" class="pointer"></div>
        <div id="minute" class="pointer"></div>
        <div id="second" class="pointer"></div>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  background: #9c9;
}
#warp {
  width: 230px;
  height: 230px;
  margin: 50px auto;
}
#clock {
  width: 200px;
  height: 200px;
  border-radius: 115px;
  border: 15px solid #f96;
  background: white;
  position: relative;
}

#number div {
  width: 190px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 90px;
}
#number span {
  display: block;
  width: 20px;
  height: 20px;
}
.pointer {
  position: absolute;
  bottom: 90px;
  transform-origin: 50% 90%;
}
#houre {
  width: 5px;
  height: 60px;
  left: 98px;
  background: black;
}
#minute {
  width: 3px;
  height: 70px;
  left: 99px;
  background: gray;
}
#second {
  width: 1px;
  height: 80px;
  left: 100px;
  background: red;
}

const numberDivs = document.querySelectorAll('#number div');
const numberSpans = document.querySelectorAll('#number span');

// 布置钟盘
for (let i = 0; i < numberDivs.length; i++) {
  numberDivs[i].style.transform = `rotate(${i * 30}deg)`;
}
// 纠正文字旋转偏移
for (let j = 0; j < numberSpans.length; j++) {
  numberSpans[j].style.transform = `rotate(${j * -30}deg)`;
}

// 渲染时钟
function render() {
  const oHoure = document.querySelector('#houre');
  const oMinute = document.querySelector('#minute');
  const oSecond = document.querySelector('#second');

  const nowTime = new Date();
  const nowHoure = nowTime.getHours();
  const nowMinute = nowTime.getMinutes();
  const nowSecond = nowTime.getSeconds();

  // 计算旋转度数
  const hourDeg =
    nowHoure * 30 +
    nowMinute * (360 / 12 / 60) +
    nowSecond * (360 / 12 / 60 / 60);
  const minuteDeg = nowMinute * (360 / 60) + nowSecond * (360 / 60 / 60);
  const secondDeg = nowSecond * (360 / 60);

  oHoure.style.transform = `rotate(${hourDeg}deg)`;
  oMinute.style.transform = `rotate(${minuteDeg}deg)`;
  oSecond.style.transform = `rotate(${secondDeg}deg)`;
}

render();

// 每隔1s进行一次渲染
setInterval(render, 1000);

weixin_43117402

发布了42 篇原创文章 · 获赞 3 · 访问量 576

私信关注

猜你喜欢