JavaScript 5 ，JavaScript生成rgb随机色（JavaScript函数生成rgb随即色）

北城笑笑

已于 2024-11-18 18:52:48 修改

阅读量2.9k

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript

于 2022-11-16 12:10:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65793170/article/details/127882538

版权

JavaScript 专栏收录该内容

34 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript生成RGB随机色。通过定义一个函数choseRgb()，利用Math.random和Math.floor生成0-255之间的随机数作为红色、绿色和蓝色通道的值，然后拼接成RGB字符串返回。这种方法可以在网页项目中用于创建动态变化的背景色等效果。文章还展示了函数的调用和在实际项目中的应用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

JavaScript 生成随机RGB颜色，是一种常见的做法，用于增强页面的视觉效果。这里来分享记录，如何使用JavaScript 生成随机的颜色。

一. 定义函数

定义函数方法，方便调用，请看

    function choseRgb() {

      // Math.random是生成0-1之间的随机数 *256 的范围就变成0.xx-255.7
      // Math.floor 向下取整就变成 0-255
      let r = Math.floor(Math.random() * 256);

      let g = Math.floor(Math.random() * 256);

      let b = Math.floor(Math.random() * 256);

      // 拼接返回
      return `rgb(${r},${g},${b})`;

    },

二. 函数调用

      let rbg = choseRgb();    
    
      console.log(rbg);  //控制台输出: rgb(51,227,128)

三. 项目使用

直接在项目中使用，新建JS文件 > 导出 > 页面引入 > 调用，请看

1、导出：export function choseRgb() { ...... }

2、引入：import { choseRgb } from "../../src/utils/randomColor";

3、调用：// 点击生成随机色
        choseColor() {
          let rbg = choseRgb();
          console.log(rbg);  //控制台输出: rgb(178,134,179)
        },