javascript - 如何在 CSS 中制作时钟并在 JS 中工作

Question

我想在上面的图片中制作时钟，但我也做不到，因为我的 CSS 效率低下。任何人都可以帮助我制作它，或者指导我完成制作吗？

我试过这个:

.try {
  background-color: #CDCDCD;
  border-radius: 150px;
  width: 300px;
  height: 300px;
}

.clc {
  display: inline-block;
  position: relative;
  bottom: 75px;
  left: 63px;
}

.cl {
  display: block;
  line-height: 220px;
  font-size: xx-large;
}

<div class="try">
  <div class="clc"><span class="cl">10</span><span class="cl">8</span></div>
  <div class="clc"><span class="cl">11</span><span class="cl">7</span></div>
  <div class="clc"><span class="cl">12</span><span class="cl">6</span></div>
  <div class="clc"><span class="cl">1</span><span class="cl">5</span></div>
  <div class="clc"><span class="cl">2</span><span class="cl">4</span></div>
  <div class="clc"><span class="cl">3</span><span class="cl">9</span></div>

</div>

Answer 1

一种方法是使用 svg 和 rotate 属性。这是一个很好的方法。

var fixHands = function () {
  var d = new Date()
  var t = Math.floor((d.getTime() - d.getTimezoneOffset() * 60000) / 1000);

  var h = t % (12 * 3600) / 120;
  var n = t % 3600 / 10;
  var s = t % 60 * 6;
  
  document.getElementById('hour').setAttribute('transform', 'rotate(' + h + ' 50 50)');
  document.getElementById('minute').setAttribute('transform', 'rotate(' + n + ' 50 50)');
  document.getElementById('second').setAttribute('transform', 'rotate(' + s + ' 50 50)');
};

setInterval(fixHands, 200);
fixHands();

<svg width="100" height="100">

  <g stroke="steelblue" stroke-width="2" stroke-linecap="round">
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(0  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(90  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(180  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(270  50 50)" />
  </g>
  
  <g stroke="steelblue" stroke-width="2" stroke-linecap="round">
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(30  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(60  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(120  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(150  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(210  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(240  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(300  50 50)" />
   <line x1="50" y1="0" x2="50" y2="15" transform="rotate(330  50 50)" />
  </g>
  
  <g stroke="steelblue" stroke-width="1" stroke-linecap="round">
   <line id="second" x1="50" y1="5" x2="50" y2="60" transform="rotate(0  50 50)" />
  </g>
  
  <g stroke="steelblue" stroke-width="2" stroke-linecap="round">
   <line id="minute" x1="50" y1="10" x2="50" y2="55" transform="rotate(0  50 50)" />
  </g>
  
  <g stroke="steelblue" stroke-width="3" stroke-linecap="round">
   <line id="hour" x1="50" y1="25" x2="50" y2="55" transform="rotate(0  50 50)" />
  </g>
</svg>