Javascript 生成随机十六进制以更改html中的颜色_Javascript_Html_Css

Javascript 生成随机十六进制以更改html中的颜色

javascript html css

Javascript 生成随机十六进制以更改html中的颜色,javascript,html,css,Javascript,Html,Css,我有一个带有彩色背景的div元素的网页我希望每次有人加载页面时颜色都会改变我在网上发现了这段代码，它显然生成了一个随机的十六进制数： '#'+Math.floor(Math.random()*16777215).toString(16); 我是JavaScript新手，所以我正在尝试拼凑如何实现它我假设我为随机生成的十六进制分配了一个变量： bandColor = '#'+Math.floor(Math.random()*16777215).toString(16); 现在我不确定是在

我有一个带有彩色背景的div元素的网页

我希望每次有人加载页面时颜色都会改变

我在网上发现了这段代码，它显然生成了一个随机的十六进制数：

'#'+Math.floor(Math.random()*16777215).toString(16);

我是JavaScript新手，所以我正在尝试拼凑如何实现它

我假设我为随机生成的十六进制分配了一个变量：

bandColor = '#'+Math.floor(Math.random()*16777215).toString(16);

现在我不确定是在样式表中还是在html中使用这个变量（bandColor）

如果是html，我猜我会在JavaScript中执行类似的操作：

$("#band").html(bandColor);

然后在html中：

<div id="band">

如果有人能指出我的对/错，我将不胜感激

尝试元素的style属性，以便：

$("#band").css("background-color", bandColour);

旁注：有时代码会生成一个五位数或更少的十六进制字符串，如

#9eb8d

。您可以通过以下方式解决此问题：

将其放在设置背景色的语句之前。

尝试元素的style属性，以便：

$("#band").css("background-color", bandColour);

旁注：有时代码会生成一个五位数或更少的十六进制字符串，如

#9eb8d

。您可以通过以下方式解决此问题：

您可以将其放在设置背景色的语句之前。

纯javascript解决方案可以是：

document.getElementById（“band”）.style.background=“蓝色”
和随机颜色：
document.getElementById（“band”）.style.background='#'+（Math.random（）*0xFFFFFF纯javascript解决方案可以是：
document.getElementById（“band”）.style.background=“blue”

和随机颜色：
document.getElementById（“band”）.style.background='#'+（Math.random（）*0xFFFFFFCSS的外部或嵌入样式表中的JavaScript
<!doctype html>
<html>
<head>
<style>
#band{
  width: 100%;
  height: 500px;
  background-color: #123456;
}
</style>
</head>
<body>
<div id="band"><div>
<script>
var bandColour = document.getElementById('band');
bandColour.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
</script>
</body>
</html>


#乐队{
宽度：100%；
高度：500px；
背景色：#123456；
}
var bandColour=document.getElementById（'band'）；
bandColour.style.backgroundColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
外部或嵌入CSS样式表中的JavaScript
<!doctype html>
<html>
<head>
<style>
#band{
  width: 100%;
  height: 500px;
  background-color: #123456;
}
</style>
</head>
<body>
<div id="band"><div>
<script>
var bandColour = document.getElementById('band');
bandColour.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
</script>
</body>
</html>


#乐队{
宽度：100%；
高度：500px；
背景色：#123456；
}
var bandColour=document.getElementById（'band'）；
bandColour.style.backgroundColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
此答案有时会生成无效的5位数颜色字符串。我使用过它，但始终会生成有效的颜色字符串，如果您更了解，欢迎编辑，此答案有时会生成无效的5位数颜色字符串。我使用过它，但始终会生成有效的颜色字符串，如果您更了解，欢迎编辑，