Javascript 圆圈转角处的秒数（如时钟）

我试着创建一个圆形，周围有小针（比如时钟中的秒），大约有60个针（数一分钟） 这里有一张图片来描述我的意思

我用的是React，javascript，css， 我怎样才能做一个循环，使每个大头针堆叠到圆圈的“角落”以适合其位置？ 我真的很难找到一个方法来安排他们看起来像它

我的最终目标是创建一个组件，该组件将接收一个

填充作为道具，表示需要使用不同颜色的管脚数量，因此我需要一种方法来控制每个管脚的背景颜色

任何建议都会很棒。谢谢
 你的意思是像下面这样的东西吗？代码将为所有带有类
clock
的标签创建60个“pin”


window.onload=function（）{
var clocks=document.getElementsByClassName（'clock'），
r=0，i，j，d，时钟；
对于（j=0；j而言，使用SVG和
stroke dasharray
可以轻松绘制“钟面”

可以使用SVG掩码和一些javascript设置时钟动画，以更改
笔划dashoffset

有关为
行程dasharray
计算值的数学解释，请参见


const maskCircle=document.querySelector（“.mask”）；
const clockText=document.querySelector（“.clock text”）；
常数r=50；
常数c=2*r*Math.PI；
设secondsLeft=60；
setInterval（函数（）{
如果（secondsLeft>0）{
第二步--；
clockText.innerText=secondsLeft；
maskCircle.style.strokeDashoffset=
maskCircle.style.strokedashcoffset-c/60*-1；
}否则{
clearInterval（）；
}
}，1000）；
正文{
背景：黑色；
}
.钟{
保证金：0自动；
位置：相对位置；
宽度：200px；
高度：200px；
边界半径：50%；
溢出：隐藏；
}
.钟面{
笔画宽度：15；
笔划线头：对接；
填充：透明；
行程数组：2.236 3；
}
格雷先生{
冲程：#333；
}
怀特先生{
笔画：白色；
}
.面具{
行程数组：314.15 314.15；
笔划偏移：0；
}
.时钟文本{
宽度：100%；
保证金：0自动；
颜色：白色；
文本对齐：居中；
位置：绝对位置；
最高：50%；
字号：6em；
转化：translateY（-50%）；
}

60
你介意我编辑你的帖子，在JS中创建60个元素吗？谢谢你的回答，但是有没有不使用线性渐变的方法呢？这是一个很好的解决方案，但我还需要一种方法为每个元素提供不同的颜色pin@greW：您可以使用
d.setAttribute（“id”、“s”+i）
在创建循环中，您可以从外部控制每个元素。您可以使用类似于
d.style.background=“线性渐变（到底部，rgba（“+cssR+”，“+cssG+”，“+cssB+”，1）16px，透明16px）”的方式更改每个元素的颜色
也可以。您可以在SVG中执行类似的操作。请参见此处：此处没有为记号上色的选项必须复制圆圈并屏蔽一个。请参见我的答案。