javascript - 像时钟一样围绕圆定位多个 div 元素

Question

我正在尝试像我们通常在模拟时钟上那样定位圆圈周围的元素。我已经为每个元素设置了 Angular ，现在任务是围绕圆圈对齐它。放置元素的起点将是 120deg 下图是一种预期结果。

这是我到目前为止写的。 Fiddle

但我现在无法进一步思考。从 CSS 方面我认为我们需要位置 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);

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>

Answer 1

好的……

我删除了 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: 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>

⋅ ⋅ ⋅

并且，旧方法，没有 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>';
  });

希望对您有所帮助!