JS自动生成随机颜色

浏览：863次- 评论：0次- 发布时间：2018-09-01

Html

Css

var Colors = function(hslLength) {
     this.hslLength = hslLength ? hslLength : 1;
     this.cArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
     this.hslArray = [];
 };
 //返回颜色数组
 Colors.prototype.rgbArray = function() {
     var self = this;
     this.hslArray = this.getHslArray();
     if (!self.hslArray.length) return [];

var rgbArray = self.hslArray.map(function(item) {
         return self.hslToRgb.apply(this, item);
     });

return rgbArray.map(function(item) {
         return {
             //三原色值
             value: item,
             //16进制的颜色
             hex: self.rgbToHexadecimal(item),
             //rgb颜色
             rgb: 'rgb(' + item.toString() + ')',
             style: {
                 background: 'rgb(' + item.toString() + ')'
             }
         }
     });
 };
 /**
  * RGB颜色转为16进制
  * @param {Object} item rgb颜色数组
  */
 Colors.prototype.rgbToHexadecimal = function(item) {
     if (item && item.length == 3) {
         var a = item[0],
             b = item[1],
             c = item[2],
             d = "#",
             cArray = this.cArray;
         d += cArray[Math.floor(a / 16)] + "" + cArray[a % 16] + "";
         d += cArray[Math.floor(b / 16)] + "" + cArray[b % 16] + "";
         d += cArray[Math.floor(c / 16)] + "" + cArray[c % 16] + "";
         return d;
     }
 };

/**
  * HSL颜色值转换为RGB
  * H，S，L 设定在 [0, 1] 之间
  * R，G，B 返回在 [0, 255] 之间
  *
  * @param H 色相
  * @param S 饱和度
  * @param L 亮度
  * @returns Array RGB色值
  */
 Colors.prototype.hslToRgb = function(H, S, L) {
     var R, G, B;
     if (+S === 0) {
         R = G = B = L; // 饱和度为0 为灰色
     } else {
         var hue2Rgb = function(p, q, t) {
             if (t < 0) t += 1;
             if (t > 1) t -= 1;
             if (t < 1 / 6) return p + (q - p) * 6 * t;
             if (t < 1 / 2) return q;
             if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
             return p;
         };
         var Q = L < 0.5 ? L * (1 + S) : L + S - L * S;
         var P = 2 * L - Q;
         R = hue2Rgb(P, Q, H + 1 / 3);
         G = hue2Rgb(P, Q, H);
         B = hue2Rgb(P, Q, H - 1 / 3);
     }
     return [Math.round(R * 255), Math.round(G * 255), Math.round(B * 255)];
 };

// 获取随机HSL
 Colors.prototype.randomHsl = function() {
         var H = Math.random();
         var S = Math.random();
         var L = Math.random();
         return [H, S, L];
     },

// 获取HSL数组
     Colors.prototype.getHslArray = function() {
         var HSL = [];
         var hslLength = this.hslLength ? this.hslLength : 1;
         for (var i = 0; i < hslLength; i++) {
             var ret = this.randomHsl();

// 颜色相邻颜色差异须大于 0.25
             if (i > 0 && Math.abs(ret[0] - HSL[i - 1][0]) < 0.25) {
                 i--;
                 continue; // 重新获取随机色
             }
             ret[1] = 0.7 + (ret[1] * 0.2); // [0.7 - 0.9] 排除过灰颜色
             ret[2] = 0.4 + (ret[2] * 0.4); // [0.4 - 0.8] 排除过亮过暗色

// 数据转化到小数点后两位
             ret = ret.map(function(item) {
                 return parseFloat(item.toFixed(2));
             });

HSL.push(ret);
         }
         return HSL;
     };

function btn() {
     //获取td
     var tds = document.getElementById("table").getElementsByTagName("td");
     //颜色个数
     var size = tds.length;
     //生成一个16个颜色的数组
     var colors = new Colors(size).rgbArray();
     for (let i = 0; i < size; i++) {
         //填充颜色
         tds[i].style.backgroundColor = colors[i].hex;
     }
 }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：js随机生成颜色填充

做了个自动生成颜色的小插件，直接贴代码了，排除了黑白灰这些看上去奇怪的颜色，并且生成的颜色保持色差，避免相近或者相同的颜色的产生，使用也很方便。var colors = new colors(颜色个数).rgbarray（）;就可以获取颜色对象数组，每个颜色包含了颜色的rgb，16进制等属性，自己修改也很方便。

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取