围绕父 div javascript 问题的圆圈答案

【问题标题】：Circles around a parent div javascript issue围绕父 div javascript 问题的圆圈
【发布时间】：2018-07-14 15:55:31
【问题描述】：

我试图在它周围有一个父 div 和 x 数量的圆圈。在我创建的示例中......我试图在它周围绕 6 个圆圈。它们都形成一个圆圈，但不在父 div 周围。我做错了什么？

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
var elementList = document.querySelectorAll(".circle");
for (var i = 0; i <= elementList.length; i++) {
  elementList[i].style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  elementList[i].style.top = (y + totalOffset).toString() + "px";
  elementList[i].style.left = (x + totalOffset).toString() + "px";
}

.container label {
  cursor: pointer;
  height: 150px;
  width: 150px;
  display: table-cell;
  text-align: center;
  padding: 20px 10px 10px 20px;
  vertical-align: middle;
  border-radius: 50%;
  background: green;
}

.container input[type="checkbox"] {
  display: none;
}

#parentdiv {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #ac5;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #ac5;
  border-radius: 100px;
}

<div id="parentdiv"></div>
<div class="container">
  <input type="checkbox" id="test1">
  <div class="circle">
    <label for="test1" class="inner">Test 1</label>
  </div>
  <input type="checkbox" id="test2">
  <div class="circle">
    <label for="test2" class="inner">Test 2</label>
  </div>
  <input type="checkbox" id="test3">
  <div class="circle">
    <label for="test3" class="inner">Test 3</label>
  </div>
  <input type="checkbox" id="test4">
  <div class="circle">
    <label for="test4" class="inner">Test 4</label>
  </div>
  <input type="checkbox" id="test5">
  <div class="circle">
    <label for="test5" class="inner">Test 5</label>
  </div>
  <input type="checkbox" id="test6">
  <div class="circle">
    <label for="test6" class="inner">Test 6</label>
  </div>
</div>

JSFiddle Demo

【问题讨论】：

标签： javascript html arrays css

【解决方案1】：

我浏览了您的代码，但有以下疑问：

为什么要在容器类中使用填充？ - 我想它会使子圈大于父圈。如果您将 360 度除以子圈的数量 (6)，则子圈的高度和宽度可能与父圈相同。
为什么 var offsetToChildCenter = 20;? - 如果容器类有属性“height: 150px; width: 150px;"，那么我猜你可以把这行改成 var offsetToChildCenter = 75
为什么要将 offsetToChildCenter 减去 offsetToParentCenter (var totalOffset = offsetToParentCenter - offsetToChildCenter;)？ - 在这一行中，我希望你可以更改为 var totalOffset = offsetToParentCenter + offsetToChildCenter;

因此，通过这些更改，源代码将变为：

.container label {
  cursor: pointer;
  height: 150px;
  width: 150px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: green;
}

Javascript：

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 75;
var totalOffset = offsetToParentCenter + offsetToChildCenter;
var elementList = document.querySelectorAll(".circle");
for (var i = 0; i <= elementList.length; i++) {
  elementList[i].style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  elementList[i].style.top = (y + totalOffset).toString() + "px";
  elementList[i].style.left = (x + totalOffset).toString() + "px";
}

至少，毕竟子圈不会完全围绕父圈，这可能是由于 IEEE-754 双格式（https://stackoverflow.com/a/9652699/7113404）中的舍入错误造成的。

【讨论】：

【解决方案2】：

您在父 div 上的边距似乎已关闭。另外我可能会尝试将“parentdiv”作为容器的子项。如果它不是父级，则不是父级 div。

【讨论】：