首页 编程开发javascript随机产生RGB颜色和十六进制颜色值

javascript随机产生RGB颜色和十六进制颜色值

戴墨镜的刘备 戴墨镜的刘备
分类：编程开发
字数: 1251
评论: 0
阅读: 2367
摘要：RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色

一、随机产生RGB颜色

RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。
该函数可以生成rgb颜色值在css中的表示方式， 如果想偏好某种颜色值，可以将其它颜色值的最大值设置的小一些。

/**
 * 随机颜色 RGB
 * @returns {string}
 */
function randomRgb () {
    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 + ')';
}

二、 随机产生十六进制的颜色

css中还有一种颜色表示方式是使用十六进制数值来表示rgb三个颜色，格式是 '#FFFFFF'
以下是两种方式:

  1. 随机产生rgb三色值，并转化为十六进制，然后拼接起来
  2. 直接随机产生6个十六进制字母和数字，然后拼接起来

第一种:

/**
 * 随机颜色 十六进制
 * @returns {string}
 */
function randomHex () {
    var r = Math.floor(Math.random() * 256).toString(16);
    var g = Math.floor(Math.random() * 256).toString(16);
    var b = Math.floor(Math.random() * 256).toString(16);
    r = r.length === 2 ? r : '0' + r;
    g = g.length === 2 ? g : '0' + g;
    b = b.length === 2 ? b : '0' + b;
    return '#' + r + g + b;
}

第二种:

/**
 * 随机颜色 十六进制
 * @returns {string}
 */
function randomHex () {
    var arr = '0123456789abcdef'.split('');
    var len = arr.length;

    var color = '';
    for (var i = 0; i < 6; i++) {
        color += arr[Math.floor(Math.random() * len)];
    }
    return '#' + color;
}
文章发布于: 2020-09-03 09:26:00
前端 javascript
扫描二维码，在手机上阅读

转载请注明出处: 皮哈皮阿

本文的链接地址: https://blog.phpat.com/web/515.html

您可能对以下文章感兴趣
本站由emlog pro驱动
冀ICP备2023024430号-1 京公网安备11011402053654

sitemap