在 JavaScript 中生成随机颜色
本文将通过示例讨论使用 JavaScript 内置数学函数和 UI（用户界面）的 JQuery 库来随机更改 HTML 网页 onClick 的背景颜色。使用数学函数，我们可以轻松地获得舍入值作为下限和上限，并且我们可以使用 math.random() 获得一个随机值。
在 HTML 中使用 Math.floor(Math.random()) 使用 JavaScript 生成随机颜色
每当用户按下 Change background color 按钮时，就会触发 getRandomColor 方法。该方法使用 JQuery 将 CSS 样式分配给我们将更改背景颜色的 HTML 网页的 body 标记。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random colors</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body id ="bodyId" >
<Div style="text-align: center; width: 100%;">
<H1>Generate Random Color using JavaScript/jquery</H1>
<button onclick="getRandomColor()">Change background color</button>
</Div>
</body>
<script>
//The ColorCode() will give the code every time.
function ColorCode() {
var makingColorCode = '0123456789ABCDEF';
var finalCode = '#';
for (var counter = 0; counter < 6; counter++) {
finalCode =finalCode+ makingColorCode[Math.floor(Math.random() * 16)];
}
return finalCode;
}
//Function calling on button click.
function getRandomColor() {
$("#bodyId").css("background-color", ColorCode());
}
</script>
</html>
在上面的 HTML 页面源代码中，你可以在 <script> 标签中看到 JQuery 链接，这些链接是在 doctype html 中使用 JQuery 库所必需的。在下一步中，function getRandomColor() 在另一个名为 function ColorCode() 的函数内的 <script> 标记内声明，该函数分配具有属性背景颜色的 CSS 样式。
function ColorCode() 包含一串十六进制十进制值（0-F），我们使用 for 循环来执行代码语句，直到给定的条件为真。在这种情况下，要满足的条件是 var counter = 0;计数器 < 6;计数器++。
该循环将通过将随机值与长度为 6 的 # 连接起来生成一个 finalCode 字符串，然后我们返回该 finalCode 字符串并将其用作颜色属性。
检查给定的 HTML 代码
按照这四个简单的步骤来了解 getRandomColor 方法。
-
创建一个文本文档。你可以使用记事本或任何其他文本编辑工具。
-
将给定的代码粘贴到创建的文本文件中。
-
使用
.html扩展名保存该文本文件，并使用任何默认浏览器打开它。 -
你可以看到
Change background color按钮。使用该按钮，你可以随机更改背景颜色。
在 JavaScript 中获取随机颜色结果的替代方法
你也可以使用一行代码在 JavaScript 中实现随机颜色选择，如下所示。它最大限度地减少了代码长度以节省时间/内存并提供有效的结果。
function generateRandomCode() {
var myRandomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
return myRandomColor;
}
// will generate any random color
在这两个示例中，generateRandomCode() 和 ColorCode() 将使用 javaScript 内置方法 Math.random() 和 6 个长度值的组合返回一个随机颜色字符串。