Javascript 将多个div元件像时钟一样放置在圆圈周围

我正试图像我们通常在模拟时钟上一样，在圆圈周围定位元素。我已经为每个元素设置了角度，现在的任务是围绕圆对齐它。放置元素的起点为

120度

，下图为预期结果

这是我到目前为止写的

但在这一点上，我无法进一步思考。从CSS的角度来看，我认为我们需要position

absolute

和

right

和

bottom

属性，但是

bottom

和

right

的值将根据某种算法进行计算

var numberOfElement=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]；
var initialRender=numberOfElement.slice（0,13）；
函数渲染（数据）{
变量角度=[120]；
data.forEach（函数（项、索引）{
角度.推力（角度[指数]+20）；
})
返回角；
}
函数generateHtml（）{
var html=''；
变量角度=渲染角度（initialRender）；
var shapeType=1；
角度。forEach（功能（项目、索引）{
html+=''+项目+''；
shapeType++；
如果（形状类型>9）{
shapeType=1；
}
})
document.querySelector（'.circle'）.innerHTML=html；
log（'item'，html）
}
generateHtml（）

.main{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：200px；
}
.圆圈{
背景：红色；
高度：150像素；
宽度：150px；
边界半径：50%；
位置：相对位置；
}
.形状-1{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-2{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-3{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-4{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-5{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-6{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-7{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-8{
宽度：5px；
高度：50px；
背景：绿色
}
.形状-9{
宽度：5px；
高度：50px；
背景：绿色
}
.作为控制台包装{最大高度：3em！重要；}

好的

我删除了JS和CSS中的多个

.shapeX

类，只使用一个（

.shapes

），以及

shapeType

变量。这只是为了让片段更简单。
您可能需要将它们添加回

…然后，我对您的代码进行了一些处理，结果是：
（有关详细信息，请参见我的代码中的注释）

var numberOfElement=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]；
var initialRender=numberOfElement.slice（0,17）；//TAKIT：修改为测试
函数渲染（数据）{
变量角度=[120]；
data.forEach（函数（项、索引）{
角度.push（（角度[索引]+20）%360）；//TAKIT:增加了模
})
返回角；
}
函数generateHtml（）{
var html=''；
变量角度=渲染角度（initialRender）；
角度。forEach（功能（项目、索引）{
//TAKIT：这里增加了CSS变量的使用，所以所有的CSS都在CSS中！
html+=''+项目+''；
});
document.querySelector（'.circle'）.innerHTML=html；//TAKIT:在循环之后将其移动到此处
}
generateHtml（）
.main{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：200px；/*TAKIT:仅对片段减少*/
}
.圆圈{
背景：红色；
高度：150像素；
宽度：150px；
边界半径：50%；
位置：相对位置；
}
.形状{
位置：绝对位置；
顶部：计算（50%-25px）；/*TAKIT：位于中心位置，25px是高度的一半*/
左：计算（50%-3px）；/*TAKIT：位于中心，3px是宽度的一半*/
宽度：6px；
高度：50px；
背景：绿色；
/*TAKIT：使用CSS变量对于旋转来说很酷
使用“此处平移”将其从中心移动*/
变换：旋转（var（--deg））平移（-50%，104px）；
/*TAKIT:104px在translate中表示圆和形状之间的边距为4px*/
}

Carlos您需要修改shape类以设置正确的左属性和顶部属性，并设置位置，这样您就可以检查问题@mbadeveloper我明白您的意思了。这是做这件事的唯一方法。但这有点像是手工操作。但是，如果新元素被添加到圆圈中，那么我必须将其设置为CSS classIf您检查我在他们使用的注释中添加的问题left=x+points[I][0]；top=y+点数[i][1]；计算新的位置。就像你计算旋转元素的角度一样漂亮！这不是OP想要的布局，而是像这样使用css变量。还有，保持对“非常好”的关注！只要对代码稍加修改，您也可以支持IE。同时，我也喜欢很酷的东西（哇！！。你用CSS做到了！@Carlos很乐意帮忙！多个类只是为了达到这个目的吗？（我会根据你的答案更新我答案中的文字。：）@TakitIsy在高度和宽度方面可以有不同的形状。这就是为什么我使用不同的类。虽然我在问题中没有提到这一点，因为我只关心元素的位置