主页 / 问题 / 1452542
Accepted
hellokitViki
Asked:2022-09-29 14:56:45 +0800 CST2022-09-29 14:56:45 +0800 CST

如何随机更改块的颜色

  • 772

有几个块。脚本如何指定4种颜色，默认情况下，进入页面时会随机改变程序的背景。但不能重复。如果超过 4 个块，则再次显示给定块的颜色。

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

javascript jquery

3 个回答

  1. Best Answer

    这是使用的方法Array.splice()

    const programBLocks = document.querySelectorAll('.program');
const colors = ['red', 'blue', 'yellow', 'green'];

function randomGenerateColor() {
  let tempColors = [...colors];
  programBLocks.forEach(element => {
    let countColors = tempColors.length;

    if (countColors === 0) {
      tempColors = [...colors];
    }

    let colorIndex = generateRandomNumber(0, tempColors.length);
    let color = tempColors[colorIndex];
    element.style.backgroundColor = color;
    tempColors.splice(colorIndex, 1);
  })
}

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

randomGenerateColor();
    body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.program {
  width: 120px;
  height: 120px;
}
    <div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

    • 2

  2. 为所有块分配颜色而不重复：

    1. 用颜色声明一个数组。
    2. 使用任何算法对数组进行洗牌（至少有十几个）
    3. 此外，从混合数组中，按循环中的顺序获取颜色，并以相同的顺序将它们分配给块。
    4. 利润
    • 1

  3. 我们生成从零到颜色数量的任意数字序列，并在一个圆圈中对其进行迭代，作为具有颜色的数组的索引。

    const colors = ['red', 'blue', 'yellow', 'green'];

function generateRandomSequence(max) {
  let sequence = [0];
  for (let i = 1; i < max; i++) {
    sequence.splice(Math.floor(Math.random() * sequence.length), 0, i)
  }
  return sequence;
}

let s = generateRandomSequence(colors.length);
let i = 0;
document.querySelectorAll('.program').forEach(element => {
  element.style.backgroundColor = colors[s[(i++) % colors.length]];
})
    body {
  display: flex;
  flex-wrap: wrap;
}

.program {
  width: 50px;
  height: 50px;
}
    <div class="item">
  <div class="program"></div>
</div>
<div class="item">
  <div class="program"></div>
</div>
<div class="item">
  <div class="program"></div>
</div>
<div class="item">
  <div class="program"></div>
</div>
<div class="item">
  <div class="program"></div>
</div>
<div class="item">
  <div class="program"></div>
</div>
<div class="item">
  <div class="program"></div>
</div>
<div class="item">
  <div class="program"></div>
</div>

    • 0

相关问题