如何将时钟表盘上的刻度线移至正方形的四个角

前端开发 2026-07-11

原始CodePen（圆形时钟）： https://codepen.io/vaskopetrov/pen/yVEXjz

我想把它改成正方形，并覆盖100% 的宽度或高度，同时保持正方形的宽高比。

如何将时钟表盘线移动到正方形的角落？如图所示

时钟|100x100，20%

更新的CodePen： https://codepen.io/editor/nitinjs-the-typescripter/pen/019cf450-8650-70ac-a59f-9ccccf3bfb50

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];

for (var i = 1; i < 60; i++) {
  clockEl.innerHTML += "<div class='diallines'></div>";
  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}

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);

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: 10cqi;
  left: 50%;
  margin-left: -3cqi;
}

.h3 {
  top: 46.67cqi;
  right: 10cqi;
}

.h6 {
  bottom: 10cqi;
  left: 50%;
  margin-left: -1.67cqi;
}

.h9 {
  left: 10.67cqi;
  top: 46.67cqi;
}

.diallines {
  position: absolute;
  z-index: 2;
  width: 0.67cqi;
  height: 5cqi;
  background: #666;
  left: 50%;
  margin-left: -0.33cqi;
  transform-origin: 50% 50cqi;
}

.diallines:nth-of-type(5n) {
  position: absolute;
  z-index: 2;
  width: 1.33cqi;
  height: 8.33cqi;
  background: #666;
  left: 50%;
  margin-left: -0.33cqi;
  transform-origin: 50% 50cqi;
}

.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;
}

<div class="clock">
  <div>
    <div class="info date"></div>
    <div class="info day"></div>
  </div>
  <div class="dot"></div>
  <div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
  <div>
    <span class="h3">3</span>
    <span class="h6">6</span>
    <span class="h9">9</span>
    <span class="h12">12</span>
  </div>
  <div class="diallines"></div>
</div>

解决方案

我用你的问题来刷新我的三角学知识。变换缩放也适用：将大小设为想象中三角形的斜边长度……

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];


for (var i = 1; i < 60; i++) {
  var size = (1/Math.cos(Math.PI/4 - Math.abs((7.5 - ( i % 15)) * 6) * Math.PI / 180)) 
  clockEl.innerHTML += "<div class='diallines'></div>";
  dialLines[i].style.transform = "rotate(" + 6 * i + "deg) scale("+size+")"
}

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);

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: 10cqi;
  left: 50%;
  margin-left: -3cqi;
}

.h3 {
  top: 46.67cqi;
  right: 10cqi;
}

.h6 {
  bottom: 10cqi;
  left: 50%;
  margin-left: -1.67cqi;
}

.h9 {
  left: 10.67cqi;
  top: 46.67cqi;
}

.diallines {
  position: absolute;
  z-index: 2;
  width: 0.67cqi;
  height: 5cqi;
  background: #666;
  left: 50%;
  margin-left: -0.33cqi;
  transform-origin: 50% 50cqi;
}

.diallines:nth-of-type(5n) {
  position: absolute;
  z-index: 2;
  width: 1.33cqi;
  height: 8.33cqi;
  background: #666;
  left: 50%;
  margin-left: -0.33cqi;
  transform-origin: 50% 50cqi;
}

.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;
}

<div class="clock">
  <div>
    <div class="info date"></div>
    <div class="info day"></div>
  </div>
  <div class="dot"></div>
  <div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
  <div>
    <span class="h3">3</span>
    <span class="h6">6</span>
    <span class="h9">9</span>
    <span class="h12">12</span>
  </div>
  <div class="diallines"></div>
</div>
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。

相关文章

DRAM和 SMEM指令能在一个时钟周期内同时发出吗？
0
created_at（服务器时间）有时比clicked_at（客户端时间）早——这是为什么？
0
Pygame性能故障排除
1
如何从cProfile获取真实耗时？
0
在设备时间被修改（离线模式）时，如何在Flutter中获取可靠的当前时间？
0
在C++中使用chrono库实现定时器
2
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。

超人AI导航关于我们免责声明

Copyright © 超人AI导航  辽ICP备2024029316号-4