Question

我正在尝试创建一个周围有小针的圆圈（例如时钟中的秒针），使其像60针一样（数分钟）这是一张描述我的意思的图片

https://www.123rf.com/photo_91759207_stock-vector-close-up-of-digital-timer-showing-time-that-is-running-out-only-25-seconds-left-clock-on-vector-illu.html

我正在使用React，javascript，css，我如何才能使每个图钉堆叠到圆角“ corner”以适合其位置的循环？我真的很难找到一种方法来安排他们看起来像它。

我的最终目标是创建一个将接受fill作为道具的组件，该组件将表示需要使用不同颜色的引脚数，因此我需要一种方法来控制每个图钉的背景颜色。

任何建议都很棒。谢谢！

Answer 1

您是说类似以下内容吗？该代码将为所有clock类的标签创建60个“ pins”。

window.onload = function() {
    var clocks = document.getElementsByClassName('clock'),
        r = 0, i, j, d, clock;
    for(j=0;j<clocks.length;j++) {
        clock = clocks[j]
        for(i=0;i<60;i++) {
            d = document.createElement('div');
            d.style.transform = "rotate("+ r +"deg)";
            clock.appendChild(d);
            r += 6;
        }
    }
}

.clock {
   position:relative;
   width:180px;
   height:180px;
   background:#eee;
}
.clock > div {
   position:absolute;
   margin-left:87px;
   width:6px;
   height:160px;
   bottom:10px;
   background: linear-gradient(to bottom, #491 16px, transparent 16px);
}

<div class="clock"></div>

Answer 2

使用SVG和stroke-dasharray可以轻松绘制“钟面”本身。

动画时钟可以使用SVG蒙版和一些JavaScript来更改stroke-dashoffset。

可以在this answer中找到有关得出stroke-dasharray的值的数学解释。

const maskCircle = document.querySelector(".mask");
const clockText = document.querySelector(".clock-text");
const r = 50;
const c = 2 * r * Math.PI;

let secondsLeft = 60;

window.setInterval(function() {
  if (secondsLeft > 0) {
    secondsLeft--;
    clockText.innerText = secondsLeft;
    maskCircle.style.strokeDashoffset =
      maskCircle.style.strokeDashoffset - c / 60 * -1;
  } else {
    clearInterval();
  }
}, 1000);

body {
  background: black;
}

.clock {
  margin: 0 auto;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.clock-face {
  stroke-width: 15;
  stroke-linecap: butt;
  fill: transparent;
  stroke-dasharray: 2.236 3;
}

.grey {
  stroke: #333;
}

.white {
  stroke: white;
}

.mask {
  stroke-dasharray: 314.15 314.15;
  stroke-dashoffset: 0;
}

.clock-text {
  width: 100%;
  margin: 0 auto;
  color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  font-size: 6em;
  transform: translateY(-50%);
}

<div class="clock">
  <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
    <mask id="mask">
      <circle class="clock-face white mask" cx="50" cy="50" r="50" transform="rotate(-90.5 50 50)" />
    </mask>
  </defs>
    <circle class="clock-face grey" cx="50" cy="50" r="50" />
    <circle class="clock-face white" cx="50" cy="50" r="50" mask="url(#mask)" />  
  </svg>
  <div class="clock-text">60</div>
</div>

圆角秒（例如时钟）

2 个答案: