javascript - 将多个 div 元素放置在像时钟一样的圆圈周围
问题描述
我试图像我们通常在模拟时钟上那样在圆圈周围定位元素。我已经为每个元素设置了角度,现在的任务是将其围绕圆圈对齐。放置元素的起点将是120deg
下图是一种预期的结果。
这是我到目前为止所写的。小提琴
但在这一点上,我无法进一步思考。从 CSS 方面来看,我认为我们需要 positionabsolute
和right
andbottom
属性,但是 and 的值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);
function renderAngle(data) {
var angles = [120];
data.forEach(function(item, index) {
angles.push(angles[index] + 20);
})
return angles;
}
function generateHtml() {
var html = '';
var angles = renderAngle(initialRender);
var shapeType = 1;
angles.forEach(function(item, index) {
html += '<div class="shape-' + shapeType + '" style="transform:rotate(' + item + 'deg)"> ' + item + ' </div>';
shapeType++;
if (shapeType > 9) {
shapeType = 1;
}
})
document.querySelector('.circle').innerHTML = html;
console.log('item', html)
}
generateHtml()
.main {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.circle {
background: red;
height: 150px;
width: 150px;
border-radius: 50%;
position: relative;
}
.shape-1 {
width: 5px;
height: 50px;
background: green
}
.shape-2 {
width: 5px;
height: 50px;
background: green
}
.shape-3 {
width: 5px;
height: 50px;
background: green
}
.shape-4 {
width: 5px;
height: 50px;
background: green
}
.shape-5 {
width: 5px;
height: 50px;
background: green
}
.shape-6 {
width: 5px;
height: 50px;
background: green
}
.shape-7 {
width: 5px;
height: 50px;
background: green
}
.shape-8 {
width: 5px;
height: 50px;
background: green
}
.shape-9 {
width: 5px;
height: 50px;
background: green
}
.as-console-wrapper { max-height: 3em !important; }
<div class="main">
<div class="circle">
</div>
</div>
解决方案
好的……</p>
我删除了.shapeX
JS 和 CSS 中的多个类,只使用一个(.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: Modified to test
function renderAngle(data) {
var angles = [120];
data.forEach(function(item, index) {
angles.push((angles[index] + 20) % 360); // TAKIT: Added modulo
})
return angles;
}
function generateHtml() {
var html = '';
var angles = renderAngle(initialRender);
angles.forEach(function(item, index) {
// TAKIT: Added use of a CSS var here, so all the CSS is in the CSS!
html += '<div class="shapes' + '" style="--deg:' + item + 'deg;">' + item + '</div>';
});
document.querySelector('.circle').innerHTML = html; // TAKIT: Moved it here, after the loop
}
generateHtml();
.main {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* TAKIT: reduced only for snippet */
}
.circle {
background: red;
height: 150px;
width: 150px;
border-radius: 50%;
position: relative;
}
.shapes {
position: absolute;
top: calc(50% - 25px); /* TAKIT: position at center, 25px is half the height */
left: calc(50% - 3px); /* TAKIT: position at center, 3px is half the width */
width: 6px;
height: 50px;
background: green;
/* TAKIT: Using CSS var is cool for the rotation
Using translate here to shift it from the center */
transform: rotate(var(--deg)) translate(-50%, 104px);
/* TAKIT: 104px in translate means 4px of margin between circle and shapes */
}
<div class="main">
<div class="circle">
</div>
</div>
⋅ ⋅ ⋅</p>
而且,没有 CSS 变量的旧方法,只有在需要时才使用它:
angles.forEach(function(item, index) {
// TAKIT: Without CSS var… I'm sad.
html += '<div class="shapes' + '" style="transform: rotate(' + item + 'deg) translate(0, 100px);"> ' + item + ' </div>';
});
希望能帮助到你!
推荐阅读
- python - 使用文本检索两个子元素之间的文本
- cpython - 为什么 CPython 会创建同一个方法的多个实例?
- swift - Swift 将 Eureka 日期转换为字符串以进行 firebase 存储
- algorithm - 选择对象以满足需求链
- javascript - 如何在 React 中的 HTML 中显示对象的所有属性
- java - Fontawesome-fx jar 在 Scene Builder 中没有 UI 组件
- jquery - 如何从进度条 JQuery UI 中获取价值
- arrays - 如何使用 swift 在时间复杂度 < O(n^2) 和空间复杂度 O(n) 中首先按值排序整数数组,然后按重复次数对整数数组进行排序
- javascript - AngularFire2 文档快照更改返回未定义
- angular - 角度上下文绑定