Question

我想给div一个随机的背景色，我想拥有3种颜色作为divs背景色，但是我不知道一种在div内随机显示它们的方法吗？

Answer 1

使用javascript rand()函数，您也可以在没有jQuery的情况下使用它。

getNewRandomColor();

function getNewRandomColor()
{
    var myArray = ['red', 'green', 'blue'];    
    var rand = myArray[Math.floor(Math.random() * myArray.length)];
    document.getElementById("myDiv").style.backgroundColor = rand;
}

<div id="myDiv">Something here</div>


<button onclick="getNewRandomColor()">Get New Random Color</button>

您还可以将更多颜色应用于数组以获得更多随机颜色。

Answer 2

这是一个示例代码，可在每次加载页面时更改div的颜色

$(document).ready(function(){ 
  var colors = ['red','blue','green','yellow','cyan','orange'];
  var new_color = colors[Math.floor(Math.random()*colors.length)];
  $('#color-div').css('background-color',new_color);
});

它的作用是使用Math函数从数组中选择一种随机颜色并将其应用于div

Fiddle在这里

Answer 3

使用background-color和普通JS来更改style.backgroundColor属性：

const COLORS = [
  'red',
  'green',
  'blue',
  'yellow',
  'cyan',
  'black',
];

document.onclick = () => {  
  document.body.style.backgroundColor
    = COLORS[Math.floor(Math.random() * COLORS.length)];
};

相同，但使用CSS变量：

const COLORS = [
  'red',
  'green',
  'blue',
  'yellow',
  'cyan',
  'black',
];

document.onclick = () => {
  document.body.style.setProperty('--bg', COLORS[Math.floor(Math.random() * COLORS.length)]);
};

:root {
  --bg: white;
}

body {
  background-color: var(--bg);
}

如何从6个选项中给div随机背景颜色

3 个答案: