在 JavaScript 中生成随机颜色

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中生成随机颜色

作者：迹忆客最近更新：2024/03/19 浏览次数：

本文将通过示例讨论使用 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 个长度值的组合返回一个随机颜色字符串。

上一篇：在 JavaScript 中编码 HTML 实体的简单解决方案

下一篇：在 JavaScript 中生成随机布尔值

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享