如何获得随机显示的图像和背景颜色以匹配

Question

我试图在每次访问页面时随机更改 4 种不同颜色之间的背景颜色，但我也希望页面上显示的图像与背景相匹配

例如，红色背景为 red.jpg，或蓝色背景为 blue.jpg

我遇到的问题是它们都是单独随机化的并且不匹配。

这就是我正在使用的

const imageElement = document.getElementById('random-image');
const imageSources = [  'red.jpg',  'orange.jpg',  'yellow.jpg',  'green.jpg',];
const backgroundColors = [  'red',  'orange',  'yellow',  'green',];

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function setRandomImage() {
  const randomIndex = getRandomInt(imageSources.length);
   imageElement.src = imageSources[randomIndex];
}

function setRandomBackgroundColor() {
  const randomIndex = getRandomInt(backgroundColors.length);
  document.body.style.backgroundColor = backgroundColors[randomIndex];
}

setRandomImage();
setRandomBackgroundColor();

Answer 1

肯定有其他方法可以做到这一点（例如使用对象数组作为背景和颜色），但根据提供的代码，这里有一个简单的方法来组合这两个函数以使用相同的 randomIndex 值。

const imageElement = document.getElementById('random-image');
const imageSources = [  'red.jpg',  'orange.jpg',  'yellow.jpg',  'green.jpg',];
const backgroundColors = [  'red',  'orange',  'yellow',  'green',];

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function setRandomImageAndBackground() {
  const randomIndex = getRandomInt(imageSources.length);
   imageElement.src = imageSources[randomIndex];
  document.body.style.backgroundColor = backgroundColors[randomIndex];
}

setRandomImageAndBackground();