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

Question

我试图像在平常时钟上那样在圆圈周围放置元素。我已经为每个元素设置了角度，现在任务是围绕圆圈对齐它。放置元素的起点是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变量。这只是为了使代码片段更容易 您可能想要将它们添加回去。

...然后，我用你的代码玩了一点，最后得到了这个：
（有关详细信息，请参阅我的代码中的注释）

＆＃13;

＆＃13;

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();

＆＃13;

.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 */
}

＆＃13;

<div class="main">
  <div class="circle">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

⋅ ⋅ ⋅

而且，旧的方式，没有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>';
  });

希望它有所帮助！