html+css实现指针时钟

用户1174387

发布于 2022-06-06 06:50:14

1.3K00

代码可运行

文章被收录于专栏：web开发web开发

运行总次数：0

代码可运行

周末时间，突然想用html+css实现一个简单的指针时钟的功能，以下是具体代码实现，最后附有线上链接地址。

1、代码

1.1、clock.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时钟</title>
  <script src="./js/utils.js"></script>
  <link rel="stylesheet" href="./css/clock.css">
</head>

<body>
  <div class="clock">
    <!-- 12个小时的点位 -->
    <div class="dotH dotH1"><div></div></div>
    <div class="dotH dotH2"><div></div></div>
    <div class="dotH dotH3"><div></div></div>
    <div class="dotH dotH4"><div></div></div>
    <div class="dotH dotH5"><div></div></div>
    <div class="dotH dotH6"><div></div></div>

    <!-- 60个分的点 -->
    <div class="dotM dotM1"><div></div></div>
    <div class="dotM dotM2"><div></div></div>
    <div class="dotM dotM3"><div></div></div>
    <div class="dotM dotM4"><div></div></div>
    <div class="dotM dotM5"><div></div></div>
    <div class="dotM dotM6"><div></div></div>
    <div class="dotM dotM7"><div></div></div>
    <div class="dotM dotM8"><div></div></div>
    <div class="dotM dotM9"><div></div></div>
    <div class="dotM dotM10"><div></div></div>
    <div class="dotM dotM11"><div></div></div>
    <div class="dotM dotM12"><div></div></div>
    <div class="dotM dotM13"><div></div></div>
    <div class="dotM dotM14"><div></div></div>
    <div class="dotM dotM15"><div></div></div>
    <div class="dotM dotM16"><div></div></div>
    <div class="dotM dotM17"><div></div></div>
    <div class="dotM dotM18"><div></div></div>
    <div class="dotM dotM19"><div></div></div>
    <div class="dotM dotM20"><div></div></div>
    <div class="dotM dotM21"><div></div></div>
    <div class="dotM dotM22"><div></div></div>
    <div class="dotM dotM23"><div></div></div>
    <div class="dotM dotM24"><div></div></div>

    <div class="circle"></div>
    <div class="line line-h" id="lineH">
      <div></div>
    </div>
    <div class="line line-m" id="lineM">
      <div></div>
    </div>
    <div class="line line-s" id="lineS">
      <div></div>
    </div>
  </div>

  <script>
    let hDeg = 0;
    let mDeg = 0;
    let sDeg = 0;
    let lineH = document.getElementById('lineH');
    let lineM = document.getElementById('lineM');
    let lineS = document.getElementById('lineS');
    setInterval(() => {
      let time = getHms();
      console.log(time);
      hDeg = (time.h * 30 + time.m / 60 * 30 + time.s / 60 * 0.008333333333333333) - 90;
      mDeg = (time.m * 6 + time.s/60 * 6) - 90;
      sDeg = time.s * 6 - 90;
      lineH.style.transform = `rotate(${hDeg}deg)`;
      lineM.style.transform = `rotate(${mDeg}deg)`;
      lineS.style.transform = `rotate(${sDeg}deg)`;
      lineH.style.display = 'block';
      lineM.style.display = 'block';
      lineS.style.display = 'block';
    }, 1000)
  </script>
</body>

</html>

1.2、utils.js

/**
 * 获取当前时间的时分秒（{h:12,m:12,s:12}）
 * @param {*} seconds 
 * @returns 
 */
function getHms(){
  let h = 0, m = 0, s = 0;
  let date = new Date();
  h = date.getHours();
  m = date.getMinutes();
  s = date.getSeconds();
  h = h >= 12 ? h - 12 : h;
  return {
    h:h,
    m:m,
    s:s
  };
}

1.3、clock.css

.clock {
  position: relative;
  background-color: #222;
  display: flex;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 10px solid rgb(156, 154, 154);
  align-items: center;
  justify-content: center;
  margin: 50px auto;
}

.circle {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
}

/* 时针 */
.line-h {
  display: none;
  position: absolute;
  width: 46px;
  height: 12px;
  border-radius: 6px;
  background-color: transparent;
}

.line-h div {
  width: 110px;
  background: #fff;
  height: 12px;
  border-radius: 6px;
}

/* 分针 */
.line-m {
  display: none;
  position: absolute;
  width: 46px;
  height: 8px;
  border-radius: 4px;
  background-color: transparent;
}

.line-m div {
  width: 150px;
  background: #fff;
  height: 8px;
  border-radius: 4px;
}

/* 秒针 */
.line-s {
  display: none;
  position: absolute;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background-color: transparent;
}

.line-s div {
  width: 160px;
  background: #fff;
  height: 4px;
  border-radius: 2px;
}

/* 12个小时的点位 */
.dotH {
  position: absolute;
  height: 6px;
  width: 300px;
  background: #fff;
}

.dotH div {
  position: absolute;
  height: 8px;
  top: -1px;
  left: 15px;
  width: 270px;
  background-color: #222;
}

.dotH1 {
  transform: rotate(0deg);
}

.dotH2 {
  transform: rotate(30deg);
}

.dotH3 {
  transform: rotate(60deg);
}

.dotH4 {
  transform: rotate(90deg);
}

.dotH5 {
  transform: rotate(120deg);
}

.dotH6 {
  transform: rotate(150deg);
}

/* 60个分的点 */
.dotM {
  position: absolute;
  height: 3px;
  width: 300px;
  background: #fff;
}

.dotM div {
  position: absolute;
  height: 5px;
  top: -1px;
  left: 5px;
  width: 290px;
  background-color: #222;
}

.dotM1 {
  transform: rotate(6deg);
}

.dotM2 {
  transform: rotate(12deg);
}

.dotM3 {
  transform: rotate(18deg);
}

.dotM4 {
  transform: rotate(24deg);
}

.dotM5 {
  transform: rotate(36deg);
}

.dotM6 {
  transform: rotate(42deg);
}

.dotM7 {
  transform: rotate(48deg);
}

.dotM8 {
  transform: rotate(54deg);
}

.dotM9 {
  transform: rotate(66deg);
}

.dotM10 {
  transform: rotate(72deg);
}

.dotM11 {
  transform: rotate(78deg);
}

.dotM12 {
  transform: rotate(84deg);
}

.dotM13 {
  transform: rotate(96deg);
}

.dotM14 {
  transform: rotate(102deg);
}

.dotM15 {
  transform: rotate(108deg);
}

.dotM16 {
  transform: rotate(114deg);
}

.dotM17 {
  transform: rotate(126deg);
}

.dotM18 {
  transform: rotate(132deg);
}

.dotM19 {
  transform: rotate(138deg);
}

.dotM20 {
  transform: rotate(144deg);
}

.dotM21 {
  transform: rotate(156deg);
}

.dotM22 {
  transform: rotate(162deg);
}

.dotM23 {
  transform: rotate(168deg);
}

.dotM24 {
  transform: rotate(174deg);
}