在 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
个长度值的组合返回一个随机颜色字符串。