JS随机颜色|极客笔记

JS随机颜色

在网页开发中，经常会需要随机生成颜色来美化界面。本文将介绍如何使用JavaScript随机生成颜色的方法，以及如何在网页中应用这些随机颜色。

生成随机颜色的方法

方法一：使用Math.random()

我们可以利用Math.random()方法来生成随机的RGB颜色。RGB颜色值由红色、绿色和蓝色组成，每个颜色分量的取值范围为0至255。

以下是生成随机RGB颜色的示例代码：

function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);

  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

console.log(randomColor());

上面的代码定义了一个randomColor()函数，该函数生成并返回一个随机的RGB颜色值。通过调用randomColor()函数，我们可以获得一个随机的颜色值。

方法二：使用颜色数组

除了使用Math.random()方法生成随机颜色外，我们还可以提前定义一个颜色数组，然后随机选择数组中的一种颜色。

以下是使用颜色数组生成随机颜色的示例代码：

var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff'];

function randomColorFromArray() {
  var randomIndex = Math.floor(Math.random() * colors.length);
  return colors[randomIndex];
}

console.log(randomColorFromArray());

上面的代码定义了一个colors数组，包含了一些固定的颜色值。然后定义了一个randomColorFromArray()函数，该函数从colors数组中随机选择一种颜色并返回。通过调用randomColorFromArray()函数，我们可以获得一个随机的颜色值。

在网页中应用随机颜色

方案一：应用到文本颜色

我们可以通过JavaScript生成随机颜色，并将其应用到网页中的文本颜色上。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Text Color</title>
  <style>
    body {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1 id="randomText">Hello, World!</h1>

  <script>
    function randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);

      return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    var text = document.getElementById('randomText');
    text.style.color = randomColor();
  </script>
</body>
</html>

上面的代码在页面加载时会将标题<h1>元素的文本颜色设置为随机生成的颜色。每次刷新页面时，文本颜色都会发生变化，给用户带来不同的视觉体验。

方案二：应用到背景颜色

除了文本颜色，我们还可以将随机生成的颜色应用到网页的背景色上。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Background Color</title>
</head>
<body>
  <div id="randomBackground" style="width: 100vw; height: 100vh;"></div>

  <script>
    function randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);

      return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    var background = document.getElementById('randomBackground');
    background.style.backgroundColor = randomColor();
  </script>
</body>
</html>

上面的代码在页面加载时会将一个<div>元素的背景颜色设置为随机生成的颜色。刷新页面时，背景色会随机改变，为用户呈现多彩的视觉效果。