Question

我正在尝试使射击游戏仅使用香草Javascript进行娱乐。

我想让10个或更多的圆圈在屏幕上随机移动。在下面的代码中，我在屏幕的左侧有10个圆圈列表，它们都有相同的颜色和大小，只是位置不同。这是我的HTML：

body {
  width: 100vw;
  height: 100vh;
}
.circle {
/*
  position: absolute;
  top: 1px;
*/
  width: 50px;
  height: 50px;
  color: transparent;
  border: 2px solid red;
  border-radius: 50%;
}

.circle:nth-child(1) {
position: absolute;
top: 1px;
}

.circle:nth-child(2) {
position: absolute;
top: 60px;
}

.circle:nth-child(3) {
position: absolute;
top: 120px;
}

.circle:nth-child(4) {
position: absolute;
top: 180px;
}

.circle:nth-child(5) {
position: absolute;
top: 240px;
}

.circle:nth-child(6) {
position: absolute;
top: 300px;
}

.circle:nth-child(7) {
position: absolute;
top: 360px;
}

.circle:nth-child(8) {
position: absolute;
top: 420px;
}

.circle:nth-child(9) {
position: absolute;
top: 480px;
}

.circle:nth-child(10) {
position: absolute;
top: 540px;
}

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

我是前端技术的新手。有没有一种比这更好的样式圈的有效方法？如果我想在屏幕上显示100个圆圈，那么我不想创建100个类并一一设置样式...

谢谢

Answer 1

最简单的答案是，查看您的代码，以使用JavaScript的NodeList.prototype.forEach()：

// using document.querySelectorAll() to find all elements
// matching the supplied CSS selector, and then
// NodeList.prototype.forEach() to iterate over each Node
// of that NodeList:
document.querySelectorAll('.circle').forEach(

    // using an Arrow function expression;
    // 'circle': a reference to the current Node of the NodeList,
    // 'index': the index of the current Node in the NodeList:
    // here we set the circle.style.top property to be equal to
    // the result of 60 * index concatenated with the 'px' unit:
    (circle, index) => circle.style.top = 60 * index + 'px'
);

document.querySelectorAll('.circle').forEach(
    (circle, index) => circle.style.top = 60 * index + 'px'
);

body {
  width: 100vw;
  height: 100vh;
}
.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  color: transparent;
  border: 2px solid red;
  border-radius: 50%;
}

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

诚然，这确实将第一个.circle元素放置在其top: 0px而非1px中，因此完全有可能修改上述方法，以显式设置.circle元素的样式top: 1px，然后使用JavaScript设置除第一个元素外的所有.circle元素的样式：

document.querySelectorAll('.circle + .circle').forEach(
    (circle, index) => circle.style.top = 60 + (60 * index) + 'px'
);

document.querySelectorAll('.circle + .circle').forEach(
    (circle, index) => circle.style.top = 60 + (60 * index) + 'px'
);

body {
  width: 100vw;
  height: 100vh;
}
.circle {
  position: absolute;
  top: 1px;
  width: 50px;
  height: 50px;
  color: transparent;
  border: 2px solid red;
  border-radius: 50%;
}

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

此外，使用诸如Vue的模板语言（仍然涉及JavaScript）：

// for something so simple Vue is - almost certainly -
// overkill, however: Vue is initialised (in this very
// simple case) as follows:
new Vue({

  // 'el' takes a CSS selector to identify the
  // elements in, or upon, which Vue should run:
  'el': '.wrapper'
});

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #f00;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div class="wrapper">
  <!--
    here we define the element that will be repeated,
    to repeat the element we use the v-for attribute,
    here we use the 'i in 10' (i is the current number,
    starting at 1, 10 is the end of the range); to adjust
    the 'style' attribute, we preface the attribute with
    the ':' character, and within that attribute we use:
      `top: ${i * 60 - 60)px`
    this is a JavaScript template literal syntax, in which
    the 'i * 60 - 60' wrapped by '${...}' is interpolated
    by Vue to generate the relevant values
  -->
  <div class="circle" v-for="i in 10" :style="`top: ${i * 60 - 60}px`"></div>
</div>

Answer 2

如果您可以通过javascript将球创建/附加到身体，那就更好了。像下面这样。

var ball = document.createElement('div');
ball.className = 'circle';

document.body.appendChild(ball);

然后您可以像下面这样随机更改每个球的位置。

ball.style.position.top = <your_random_number>;

如果将position: absolute放在base .circle css选择器中也会更好。

以上代码段仅适用于一个球。您只需将每个创建的球推入数组中，然后遍历数组并将每个附加到身体上，就可以简单地将其扩展多个。

HTML / CSS样式化重复元素的有效方法？

2 个答案: