【Hugo】时钟

这个表盘的设计可能还是有些局限，后续会优化一下

HTML部分

在’layouts/partials/widget/‘文件夹下创建clock.html文件，并添加以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时钟表盘</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="widget clock">
    <div class="widget--clock">
      <div class="clock-face">
        <div class="digital-clock"></div>
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand second-hand"></div>
        <div class="center-dot"></div>
      </div>
    </div>
  </section>
  <script>
    const clockFace = document.querySelector('.clock-face');
    const radius = 83; // 刻度圆半径
    const center = 88; // 刻度圆中心

    for (let i = 0; i < 60; i++) {
      const angle = i * 6;
      const radians = (angle * Math.PI) / 180;
      const x = center + radius * Math.sin(radians);
      const y = center - radius * Math.cos(radians);

      const mark = document.createElement('div');
      mark.className = 'mark';
      mark.style.left = `${x}px`;
      mark.style.top = `${y}px`;
      mark.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;

      if (i % 15 === 0) {
        mark.classList.add('long-mark');
        const numberRadius = radius - 15;
        const numberX = center + numberRadius * Math.sin(radians);
        const numberY = center - numberRadius * Math.cos(radians);

        const number = document.createElement('div');
        number.textContent = (i / 5) || 12;
        number.className = 'clock-number';
        number.style.left = `${numberX}px`;
        number.style.top = `${numberY}px`;
        number.style.transform = `translate(-50%, -50%)`;
        clockFace.appendChild(number);
      } else if (i % 5 === 0) {
        mark.classList.add('middle-mark');
      } else {
        mark.classList.add('short-mark');
      }

      clockFace.appendChild(mark);
    }

    function updateClock() {
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();

      const hourHand = document.querySelector('.hour-hand');
      const minuteHand = document.querySelector('.minute-hand');
      const secondHand = document.querySelector('.second-hand');

      const hourDeg = (hour % 12) * 30 + (minute / 60) * 30;
      const minuteDeg = minute * 6 + (second / 60) * 6;
      const secondDeg = second * 6;

      hourHand.style.transform = `rotate(${hourDeg}deg)`;
      minuteHand.style.transform = `rotate(${minuteDeg}deg)`;

      secondHand.style.transition = second === 0 ? 'none' : 'transform 0.5s linear';
      secondHand.style.transform = `rotate(${secondDeg}deg)`;

      const digitalClock = document.querySelector('.digital-clock');
      const timeString = `${hour}:${minute.toString().padStart(2, '0')}`;
      digitalClock.textContent = timeString;

      setTimeout(updateClock, 1000);
    }

    updateClock();

  </script>
</body>
</html>

css部分

然后在assets/scss文件夹下创建clock.scss文件，内容如下：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139


/* 时钟容器样式 */
.widget.clock {
  margin-top: 50px;
}

/* 时钟表盘样式 */
.clock-face {
  position: relative;
  width: 200px;
  height: 200px;
  border: 12px solid #858b8b; /* 表盘边框颜色 */
  border-radius: 50%;
  margin: 0 auto;
  background: var(--card-background); /* 动态背景 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.8);
}

/* 刻度线通用样式 */
.mark {
  position: absolute;
  width: 2px;
  background: #535656;
  border-radius: 2px;
  transform-origin: center center;
}

/* 长刻度（小时刻度）样式 */
.long-mark {
  top: 5px;
  height: 18px;
  background: #65656c; /* 长刻度颜色稍深 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* 数字样式 */
.clock-number {
  position: absolute;
  font-size: 12px; /* 字体大小 */
  color: #797F7F !important; /* 强制覆盖其他样式 */
  text-align: center;
  font-weight: bold;
}



/* 中刻度（分钟刻度）样式 */
.middle-mark {
  height: 10px;
  background: #7f8686; /* 中刻度颜色稍浅 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 短刻度（秒刻度）样式 */
.short-mark {
  height: 5px;
  background: #c0baba; /* 短刻度颜色稍浅 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}



/* 指针通用样式 */
.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 100%; /* 旋转中心在底部 */
  background: #444444;
  border-radius: 2px;
  transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.6, 1);
}

/* 时针样式 */
.hour-hand {
  width: 6px;
  height: 40px;
  background: #6A4C9C; /* 紫色 */
  z-index: 3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  top: calc(50% - 40px);
  left: calc(50% - 3px);
}

/* 分针样式 */
.minute-hand {
  width: 4px;
  height: 60px;
  background: #B497BD; /* 浅紫色 */
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  top: calc(50% - 60px);
  left: calc(50% - 2px);
}

/* 秒针样式 */
.second-hand {
  width: 2px;
  height: 70px;
  background: #FF69B4; /* 亮粉色 */
  z-index: 1;
  box-shadow: 0 2px 8px rgba(255, 99, 71, 0.6);
  top: calc(50% - 70px);
  left: calc(50% - 1px);
}

/* 中心点样式 */
.center-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #845EC2;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.8);
  z-index: 4;
}

.digital-clock {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
  font-size: 24px; /* 字体大小 */
  font-family: Arial, sans-serif; /* 字体 */
  color: #7C8181; /* 字体颜色 */
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
  z-index: 5;
}

.clock:hover .digital-clock {
  opacity: 1; /* 鼠标悬停时显示 */
}

.clock-face {
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
}

问题

如果时钟刻度有些错位，就修改html文件的

1
2


    const radius = 83; // 刻度圆半径
    const center = 88; // 刻度圆中心