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

Question

我有一个网页，其中包含具有彩色背景的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">

感谢任何能指出我对/错的人！

Answer 1

尝试元素的style属性，因此：

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

旁注：有时您的代码会生成五位数或更少的十六进制字符串，例如#9eb8d 。 您可以通过左填充零来解决此问题：

bandColour = ("000000" + bandColour).slice(-6);

您将在放置背景色的语句之前放置它。

Answer 2

纯JavaScript解决方案可以是：

document.getElementById("band").style.background = "blue";

并带有随机颜色：

document.getElementById("band").style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

Answer 3

外部或嵌入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>

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

问题描述

3 个解决方案

解决方案1
2 2018-02-07 03:46:00

解决方案2
1 已采纳 2018-02-07 03:52:58

解决方案3
1 2018-02-07 04:04:41

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

问题描述

3 个解决方案

解决方案1 2 2018-02-07 03:46:00

解决方案2 1 已采纳 2018-02-07 03:52:58

解决方案3 1 2018-02-07 04:04:41

解决方案1
2 2018-02-07 03:46:00

解决方案2
1 已采纳 2018-02-07 03:52:58

解决方案3
1 2018-02-07 04:04:41