секунд в углу круга (как часы)

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, как я могу сделать петлю, чтобы каждый штифт укладывался в круг, чтобы соответствовать его месту?Мне очень трудно найти способ, как расположить их так.

Моя конечная цель - создать компонент, который получит fill в качестве опоры, которая будет представлять количество выводов.он должен быть другого цвета, поэтому мне нужен способ, чтобы иметь возможность контролировать цвет фона каждого вывода .

, любой совет был бы замечательным.спасибо!

Answer 1

Само рисование «циферблата» легко сделать с помощью SVG и stroke-dasharray.

Анимация часы можно сделать с помощью маски SVG и некоторого javascript для изменения stroke-dashoffset.

Объяснение математики для определения значений для 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>

Answer 2

Вы имеете в виду что-то вроде следующего?Код создаст 60 «пинов» для всех тегов с классом clock.

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>