在圆圈周围放置多个div元素，如时钟。

Question

我试图在圆圈周围定位元素，就像我们通常在模拟时钟上一样。我已经为每一个元素设定了角度，现在的任务是把它围绕在圆圈上。放置元素的起点是120deg，下面的图像是某种预期结果。

​

​

这就是我到目前为止所写的。小提琴

但在这一点上，我不能再作进一步的思考。在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>';
  });

希望能帮上忙！