分享一个html实现时钟代码

分享一个html实现时钟代码
那么废话不多说直接上代码
Html代码（自己命名）

<body onload="startClock()">
    <div id="clock">
    <div>
      <span>
        <svg viewBox="0 0 160 300">
          <path id="hn_0" fill=var(--fontColor) stroke=none></path>
        </svg>
        <svg viewBox="0 0 160 300">
            <path id="hn0_" fill=var(--fontColor) stroke=none></path>
        </svg>
      </span>
      <span>时</span>
      </div>
      <div>
        <span>
          <svg viewBox="0 0 160 300">
            <path id="mn_0" fill=var(--fontColor) stroke=none></path>
          </svg>
          <svg viewBox="0 0 160 300">
            <path id="mn0_" fill=var(--fontColor) stroke=none></path>
          </svg>
        </span>
        <span>分</span>
      </div>
      <div>
        <span>
            <svg viewBox="0 0 160 300">
                <path id="sn_0" fill=var(--fontColor) stroke=none></path>
            </svg>
            <svg viewBox="0 0 160 300">
                <path id="sn0_" fill=var(--fontColor) stroke=none></path>
            </svg>
        </span>
        <span>秒</span>
      </div>
    </div>
  </div>
</body>

js代码

// 申明全局变量
var hh, mm, ss, clock;
// 预设 svg path data
var n0 =   "M012,150 022,140 138,140 148,150 138,160 022,160z";
var n0_1 = "M148,150 138,140 138,140 148,150 138,160 138,160z";
var n1 =   "M150,152 160,162 160,278 150,288 140,278 140,162z";
var n2 =   "M148,290 138,300 022,300 012,290 022,280 138,280z";
var n2_1 = "M148,290 138,300 138,300 148,290 138,280 138,280z";
var n3 =   "M010,152 020,162 020,278 010,288 000,278 000,162z";
var n3_1 = "M010,152 000,162 000,162 010,152 020,162 020,162z";
var n4 =   "M010,012 020,022 020,138 010,148 000,138 000,022z";
var n4_1 = "M010,012 020,022 020,022 010,012 000,022 000,022z";
var n5 =   "M012,010 022,000 138,000 148,010 138,020 022,020z";
var n5_1 = "M148,010 138,000 138,000 148,010 138,020 138,020z";
var n5_2 = "M012,010 022,000 022,000 012,010 022,020 022,020z";
var n6 =   "M150,012 160,022 160,138 150,148 140,138 140,022z";
var n6_1 = "M150,012 160,022 160,022 150,012 140,022 140,022z";

// 注册监听事件
document.addEventListener('visibilitychange',function(){document.hidden ? stopClock() : startClock()});

// 启动时钟
function startClock(){
  getTime();
  clock = setInterval(run, 1000);
}

// 停止时钟
function stopClock(){
  clearInterval(clock);
  clock = null;
}

// 初始化时钟
function getTime() {
  let time = new Date();
  hh = time.getHours();
  mm = time.getMinutes();
  ss = time.getSeconds();
  changeNumber("sn_0", Math.floor(ss / 10));
  changeNumber("sn0_", ss % 10);
  changeNumber("mn_0", Math.floor(mm / 10));
  changeNumber("mn0_", mm % 10);
  changeNumber("hn_0", Math.floor(hh / 10));
  changeNumber("hn0_", hh % 10);
}

// 时钟逻辑
function run() {
  if (++ss < 60) {
    changeNumber("sn_0", Math.floor(ss / 10));
    changeNumber("sn0_", ss % 10);
  }
  else {
    ss = 0;
    changeNumber("sn_0", 0);
    changeNumber("sn0_", 0);
    if (++mm < 60) {
      changeNumber("mn_0", Math.floor(mm / 10));
      changeNumber("mn0_", mm % 10);
    }
    else {
      mm = 0;
      changeNumber("mn_0", 0);
      changeNumber("mn0_", 0);
      if (++hh < 24) {
        changeNumber("hn_0", Math.floor(hh / 10));
        changeNumber("hn0_", hh % 10);
      }
      else {
        getTime();
      }
    }
  }
}

// 更新 svg 图形，支持正反序
function changeNumber(id, num) {
  switch (num) {
    case 0:
      document.getElementById(id).setAttribute("d", "M012,150 022,140 022,140 012,150 022,160 022,160z" + n1 + n2 + n1 + n3 + n4 + n4_1 + n5 + n5_1 + n6);
      break;
    case 1:
      document.getElementById(id).setAttribute("d", n0_1 + n1 + n2_1 + n1 + n1 + n6 + n4_1 + n5_1 + n5_1 + n6);
      break;
    case 2:
      document.getElementById(id).setAttribute("d", n0 + n3 + n2 + n3 + n3_1 + n6 + n4_1 + n5 + n5_1 + n6);
      break;
    case 3:
      document.getElementById(id).setAttribute("d", n0 + n1 + n2 + n1 + n3_1 + n6 + n4_1 + n5 + n5_1 + n6);
      break;
    case 4:
      document.getElementById(id).setAttribute("d", n0 + n1 + n2_1 + n1 + n3_1 + n6_1 + n4 + n5_2 + n5_1 + n6);
      break;
    case 5:
      document.getElementById(id).setAttribute("d", n0 + n1 + n2 + n1 + n3_1 + n4_1 + n4 + n5_2 + n5 + n6_1);
      break;
    case 6:
      document.getElementById(id).setAttribute("d", n0 + n1 + n2 + n3 + n3_1 + n4 + n4 + n5 + n5_1 + n4_1);
      break;
    case 7:
      document.getElementById(id).setAttribute("d", n0_1 + n1 + n2_1 + n1 + n3_1 + n6 + n6 + n5 + n5_1 + n6);
      break;
    case 8:
      document.getElementById(id).setAttribute("d", n0 + n1 + n2 + n3 + n3_1 + n4 + n4_1 + n5 + n5_1 + n6);
      break;
    case 9:
      document.getElementById(id).setAttribute("d", n0 + n1 + n2 + n1 + n3_1 + n4 + n4_1 + n5 + n5_1 + n6);
      break;
  }
}

Css代码

/* 基础样式设定 */
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

:root
{
  font-size: 1vw;
  --bgColor: #333;
  --fontColor: #fff;
}

body
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bgColor);
}

#clock
{
  display: flex;
  -webkit-box-reflect: below 2px linear-gradient(transparent,#0003);
}

#clock div
{
  position: relative;
  margin: 0 0.2rem;
}

#clock div span
{
  position: relative;
  width: 10rem;
  min-width: 100px;
  height: 8rem;
  min-height: 80px;
  background: #08f;
  color: var(--fontColor);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  box-shadow: 0 0 0 1px #0003;
}

#clock div span svg
{
  height: 6rem;
  min-height: 60px;
  margin: 0.2em;
}

#clock div span:nth-child(2)
{
  height: 3rem;
  min-height: 30px;
  font-size: 2em;
  z-index: 1;
  box-shadow: none;
  background: #06c;
  text-transform: uppercase;
}

#clock div:last-child span
{
  background: #f06;
}

#clock div:last-child span:nth-child(2)
{
  background: #c05;
}

/* 设定动画过渡 */
svg path
{
  transition: 0.2s all ease-in-out;
}