如何将方形时钟的刻度线调整至正方形边角

我来帮你搞定这个需求——把圆形时钟改成占满容器的正方形，同时把刻度线移到边角的核心是调整刻度的定位逻辑：不再依赖中心旋转来分布刻度，而是基于正方形的四条边来排列。下面是具体的修改步骤：

1. 重构刻度线的CSS样式 #

原代码里刻度线是围绕中心旋转的，现在我们要让刻度分别附着在正方形的顶部、右侧、底部、左侧四条边上，修改.diallines相关样式：

.diallines {
  position: absolute;
  z-index: 2;
  width: 0.67cqi;
  height: 5cqi;
  background: #666;
  /* 移除原中心定位的属性，改用CSS变量控制位置 */
  transform-origin: center center;
}
/* 顶部刻度：从左到右均匀排列 */
.diallines:nth-child(-n+15) {
  top: 0;
  left: calc(var(--index) * 6.666cqi);
  transform: translateY(0);
}
/* 右侧刻度：从上到下均匀排列 */
.diallines:nth-child(n+16):nth-child(-n+30) {
  right: 0;
  top: calc((var(--index) - 15) * 6.666cqi);
  transform: rotate(90deg) translateY(0);
}
/* 底部刻度：从右到左均匀排列 */
.diallines:nth-child(n+31):nth-child(-n+45) {
  bottom: 0;
  right: calc((var(--index) - 30) * 6.666cqi);
  transform: rotate(180deg) translateY(0);
}
/* 左侧刻度：从下到上均匀排列 */
.diallines:nth-child(n+46):nth-child(-n+60) {
  left: 0;
  bottom: calc((var(--index) - 45) * 6.666cqi);
  transform: rotate(270deg) translateY(0);
}
/* 保留每5个刻度（对应数字位置）的加粗加长效果 */
.diallines:nth-of-type(5n) {
  width: 1.33cqi;
  height: 8.33cqi;
}

2. 修改JavaScript的刻度生成逻辑 #

原JS是通过旋转生成刻度，现在我们需要给每个刻度添加索引变量，用来计算它在对应边上的位置：

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];
for (var i = 1; i < 60; i++) {
  const line = document.createElement('div');
  line.classList.add('diallines');
  // 添加索引变量，用于CSS计算位置
  line.style.setProperty('--index', i);
  clockEl.appendChild(line);
  // 移除原有的旋转逻辑，交给CSS控制
}

// 原有时钟运行逻辑保持不变
function clock() {
  var weekday = [
    "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
  ],
    d = new Date(),
    h = d.getHours(),
    m = d.getMinutes(),
    s = d.getSeconds(),
    date = d.getDate(),
    month = d.getMonth() + 1,
    year = d.getFullYear(),
    hDeg = h * 30 + m * (360 / 720),
    mDeg = m * 6 + s * (360 / 3600),
    sDeg = s * 6,
    hEl = document.querySelector('.hour-hand'),
    mEl = document.querySelector('.minute-hand'),
    sEl = document.querySelector('.second-hand'),
    dateEl = document.querySelector('.date'),
    dayEl = document.querySelector('.day');
  var day = weekday[d.getDay()];
  if (month < 9) {
    month = "0" + month;
  }
  hEl.style.transform = "rotate(" + hDeg + "deg)";
  mEl.style.transform = "rotate(" + mDeg + "deg)";
  sEl.style.transform = "rotate(" + sDeg + "deg)";
  dateEl.innerHTML = date + "/" + month + "/" + year;
  dayEl.innerHTML = day;
}
setInterval("clock()", 100);

3. （可选）调整数字刻度的位置 #

如果需要把12、3、6、9这四个数字移到正方形的四个边角，可以修改它们的CSS：

.h12 {
  top: 2cqi;
  left: 2cqi;
  margin-left: 0;
}
.h3 {
  bottom: 2cqi;
  right: 2cqi;
  top: auto;
}
.h6 {
  bottom: 2cqi;
  left: auto;
  right: 2cqi;
  margin-left: 0;
}
.h9 {
  left: 2cqi;
  bottom: 2cqi;
  top: auto;
}

方案说明 #

• 我们用CSS变量--index来计算每个刻度在对应边上的位置，正方形每条边分配15个刻度（60总刻度÷4边），所以每个刻度的间距约为100cqi ÷15 ≈6.666cqi。
• 通过nth-child选择器把60个刻度分成四组，分别对应正方形的四条边，再通过transform旋转让刻度线垂直于所在边。
• 时针、分针、秒针的逻辑不需要修改，它们依然围绕中心旋转，完美适配正方形容器。

内容的提问来源于stack exchange，提问作者Nitin S