在 JavaScript 中生成随机颜色

Muhammad Muzammil Hussain 2023年1月30日 2022年5月11日
  1. 在 HTML 中使用 Math.floor(Math.random()) 使用 JavaScript 生成随机颜色
  2. 在 JavaScript 中获取随机颜色结果的替代方法
在 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 个长度值的组合返回一个随机颜色字符串。

相关文章 - JavaScript Random