如何在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>

Answer 2

var exampleClock = document.getElementById("exampleClock");
var ctx = exampleClock.getContext("2d");
var radius = exampleClock.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = '#f3f3f3';
  ctx.fill();
  grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
  grad.addColorStop(0, 'blue');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius * 0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius * 0.15 + "px arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  for (num = 1; num < 13; num++) {
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius) {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  //hour
  hour = hour % 12;
  hour = (hour * Math.PI / 6) +
    (minute * Math.PI / (6 * 60)) +
    (second * Math.PI / (360 * 60));
  drawHand(ctx, hour, radius * 0.5, radius * 0.07);
  //minute
  minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
  drawHand(ctx, minute, radius * 0.8, radius * 0.07);
  // second
  second = (second * Math.PI / 30);
  drawHand(ctx, second, radius * 0.9, radius * 0.02);
}

function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0, 0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}

<html>

<body>

  <canvas id="exampleClock" width="300" height="300" style="background-color:#b0b2b1">
</canvas>

</body>

</html>

这是一个普通的 JavaScript 解决方案，不需要 CSS！

Answer 3

我有一个 Nixie 时钟 CSS、JS 网站，是我从头开始编写的！请访问 https://gnixie.websitescaffolding.com ！

查看