我是 JavaScript 新手，我有这段代码试图生成随机背景颜色，它实际上有效，但颜色标题未对齐
const color = ["red", "green", "yellow", "blue"];
let header = document.getElementById("header");
let container = document.getElementById("container");
function flip() {
container.style.backgroundColor = color[getRandomColor()];
header.textContent = color[getRandomColor()];
}
function getRandomColor() {
for (let i = 0; i < color.length; i++) {
return Math.floor(Math.random() * color.length);
}
}
我在没有
for loop这就是生成随机数的事情......它是随机的。所以它可能不会连续两次出现相同的数字。
每次您调用
getRandomColor()container.style.backgroundColor = color[getRandomColor()];
header.textContent = color[getRandomColor()];
考虑到数组的长度，这两个函数调用只有 25% 的机会导致在该数组中选择相同的索引。
如果您只想要一个随机数，请调用函数once并使用结果值两次：
const randomIndex = getRandomColor();
container.style.backgroundColor = color[randomIndex];
header.textContent = color[randomIndex];
顺便说一句...
我在没有 for 循环的情况下尝试过，但没有任何效果
您的
forfunction getRandomColor() {
return Math.floor(Math.random() * color.length);
}
首先将 getRandomColor() 的值保存到变量中，然后您可以在两者上使用相同的值。
const color = ["red", "green", "yellow", "blue"];
let header = document.getElementById("header");
let container = document.getElementById("container");
function getRandomColor() {
for (let i = 0; i < color.length; i++) {
return Math.floor(Math.random() * color.length);
}
}
function flip() {
let randomColor = getRandomColor();
container.style.backgroundColor = color[randomColor];
header.textContent = color[randomColor];
}定义一个变量并将随机索引存储在该变量中
const color = ["red", "green", "yellow", "blue"];
let header = document.getElementById("header");
let container = document.getElementById("container");
function flip() {
const randomColor = Math.floor(Math.random() * color.length);
container.style.backgroundColor = color[randomColor];
header.textContent = color[randomColor];
}
const generateBtn = document.querySelector("#generate");
const body = document.querySelector("body");
let red = 0;
let yellow = 0;
let blue = 0;
let mix = `rgb(${red}, ${yellow}, ${blue})`;
function generateColor() {
red = Math.floor(Math.random() * 255);
yellow = Math.floor(Math.random() * 255);
blue = Math.floor(Math.random() * 255);
mix = `rgb(${red}, ${yellow}, ${blue})`;
body.style.background = mix;
}
generateColor();
generateBtn.onclick = (e) => {generateColor()};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate Random Color</title>
</head>
<body>
<div>
<button id='generate'>Generate</button>
<a href="https://www.youtube.com/@Letz_build_it">Letz_build_it</a>
</div>
</body>
</html>