【发布时间】：2018-02-28 06:50:18
【问题描述】：
我试图将 15 个div 元素均匀地放置在半径为150px 的圆中。我正在使用以下代码，它似乎给出了一个奇怪的、偏心的椭圆重叠。
Fiddle
// Hold a global reference to the div#main element. Initially assign it ... somewhere useful :)
var main = document.getElementById('main');
var circleArray = [];
// Move a circle based on the distance of the approaching mouse
var moveCircle = function(circle, dx, dy) {
};
// Look at all the circle elements, and figure out if any of them have to move.
var checkMove = function() {
};
var setup = function() {
for (var i = 0; i < 15; i++) {
//create element, add it to the array, and assign it's coordinates trigonometrically.
//Then add it to the "main" div
var circle = document.createElement('div');
circle.className = 'circle number' + i;
circleArray.push(circle);
circleArray[i].posx = Math.round((150 * Math.cos(i * (2 * Math.PI / 15)))) + 'px';
circleArray[i].posy = Math.round((150 * Math.sin(i * (2 * Math.PI / 15)))) + 'px';
circleArray[i].style.position = "relative";
circleArray[i].style.top = circleArray[i].posy;
circleArray[i].style.left = circleArray[i].posx;
main.appendChild(circleArray[i]);
}
};
setup();
window.addEventListener('load', function() {
});div {
box-sizing: border-box;
}
div#main {
position: absolute;
left: 50%;
top: 50%;
}
div.circle {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}<div id="main"></div>关于我可能做错了什么有什么建议吗？
【问题讨论】：
-
请包含相应的HTML。
-
完成。 “主”元素仅在主 HTML div 上使用 getElementById 方法找到。
-
circleArray 也没有定义，但无论如何，我想我们错过了一些你正在使用的基本 CSS，你能提供吗？ （我猜就是你的代码中的'probmem.css'）
-
如果你也包含你的 CSS 会更好。
-
已更新以包含 css... 此外，circleArray 在脚本的前面被全局定义为我要推送的空数组。还包括一个指向 JSFiddle 的链接，以防我忘记了一些代码，这样每个人都可以看到问题。提前致谢！
标签： javascript html css