实现1:1比例方形时钟：如何将刻度线移至正方形边角

要将圆形时钟改造为方形并把刻度线移至四边/边角，我们需要调整刻度线的生成逻辑和定位方式，不再使用中心放射的旋转，而是将刻度线分布在正方形的四条边上，垂直于边排列。以下是具体修改步骤：

1. 修改刻度线生成逻辑（JavaScript） #

原代码是通过旋转生成中心放射的刻度，现在我们将60个刻度分成四组，分别排列在正方形的上、右、下、左四条边上，每组15个刻度，并标记每5个刻度为大刻度：

var clockEl = document.getElementsByClassName('clock')[0];
// 生成60个刻度线
for (var i = 0; i < 60; i++) {
  const dialLine = document.createElement('div');
  dialLine.className = 'diallines';
  // 划分四个边，每个边15个刻度
  const side = Math.floor(i / 15);
  const pos = i % 15;
  
  // 根据边设置位置和旋转角度
  switch(side) {
    case 0: // 上边：从左到右，刻度向下延伸
      dialLine.style.top = '0';
      dialLine.style.left = `${(pos / 14) * 100}%`;
      dialLine.style.transform = 'rotate(0deg)';
      break;
    case 1: // 右边：从上到下，刻度向左延伸
      dialLine.style.right = '0';
      dialLine.style.top = `${(pos / 14) * 100}%`;
      dialLine.style.transform = 'rotate(90deg)';
      break;
    case 2: // 下边：从右到左，刻度向上延伸
      dialLine.style.bottom = '0';
      dialLine.style.right = `${(pos / 14) * 100}%`;
      dialLine.style.transform = 'rotate(180deg)';
      break;
    case 3: // 左边：从下到上，刻度向右延伸
      dialLine.style.left = '0';
      dialLine.style.bottom = `${(pos / 14) * 100}%`;
      dialLine.style.transform = 'rotate(270deg)';
      break;
  }
  
  // 标记每5个刻度为大刻度
  if (i % 5 === 0) {
    dialLine.classList.add('large-dial');
  }
  clockEl.appendChild(dialLine);
}

// 原时钟逻辑保持不变
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);

2. 调整刻度线和小时数字的CSS样式 #

修改刻度线的定位规则，移除原中心旋转的设置，并调整小时数字到正方形的边角位置：

html, body {
 margin: 0;
 height: 100%;
 overflow: hidden;
}
.clock {
 background: #ececec;
 height: 100%;
 aspect-ratio: 1 / 1;
 margin: 0 auto;
 border: 14px solid #333;
 box-sizing: border-box;
 position: relative;
 box-shadow: 0 2vw 4vw -1vw rgba(0, 0, 0, 0.8);
 container-type: size;
}
.dot {
 width: 4.67cqi;
 height: 4.67cqi;
 background: #ccc;
 border-radius: 50%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 position: absolute;
 z-index: 10;
 box-shadow: 0 0.67cqi 1.33cqi -0.33cqi black;
}
.hour-hand {
 position: absolute;
 z-index: 5;
 width: 1.33cqi;
 height: 21.67cqi;
 background: #333;
 top: 26.33cqi;
 transform-origin: 50% 24cqi;
 left: 50%;
 margin-left: -0.67cqi;
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
}
.minute-hand {
 position: absolute;
 z-index: 6;
 width: 1.33cqi;
 height: 33.33cqi;
 background: #666;
 top: 15.33cqi;
 left: 50%;
 margin-left: -0.67cqi;
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 transform-origin: 50% 35cqi;
}
.second-hand {
 position: absolute;
 z-index: 7;
 width: 0.67cqi;
 height: 40cqi;
 background: gold;
 top: 8.67cqi;
 left: 50%;
 margin-left: -0.33cqi;
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 transform-origin: 50% 41.67cqi;
}
span {
 display: inline-block;
 position: absolute;
 color: #333;
 font-size: 7.33cqi;
 font-family: 'Poiret One';
 font-weight: 700;
 z-index: 4;
}
/* 调整小时数字到边角 */
.h12 {
 top: 2cqi;
 left: 2cqi;
 margin-left: 0;
}
.h3 {
 top: 2cqi;
 right: 2cqi;
}
.h6 {
 bottom: 2cqi;
 right: 2cqi;
}
.h9 {
 bottom: 2cqi;
 left: 2cqi;
}
/* 刻度线基础样式 */
.diallines {
 position: absolute;
 z-index: 2;
 width: 0.67cqi;
 height: 5cqi;
 background: #666;
 transform-origin: top center; /* 确保刻度线垂直于边 */
}
/* 大刻度样式 */
.large-dial {
 width: 1.33cqi;
 height: 8.33cqi;
 background: #666;
}
.info {
 position: absolute;
 width: 40cqi;
 height: 6.67cqi;
 border-radius: 2.33cqi;
 background: #ccc;
 text-align: center;
 line-height: 6.67cqi;
 color: #000;
 font-size: 3.67cqi;
 left: 50%;
 margin-left: -20cqi;
 font-family: "Poiret One";
 font-weight: 700;
 z-index: 3;
 letter-spacing: 1cqi;
}
.date {
 top: 26.67cqi;
}
.day {
 top: 66.67cqi;
}

3. HTML部分无需修改 #

保持原HTML结构即可，因为我们是通过JS动态生成所有刻度线。

关键修改说明： #

• 刻度线生成：将60个刻度均匀分配到正方形的四条边上，每条边15个，通过switch语句设置每个刻度的位置和旋转角度，确保刻度线垂直于所在边。
• 大刻度标记：每5个刻度添加large-dial类，保留原大刻度的视觉效果。
• 小时数字定位：将12、3、6、9四个数字移到正方形的四个边角，符合方形时钟的布局。
• 指针逻辑：保留原指针的旋转角度计算，因为指针仍以中心为旋转原点，指向四边对应时间的刻度位置。

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