JavaScript处理颜色常用方法

获取指定颜色的低透明度
求两个颜色之间的渐变值
将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
将rgb表示方式转换为hex表示方式
JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串

获取指定颜色的低透明度

/*** 获取指定颜色的低透明度* @param {string} color 指定颜色 * @param {number} opacity 透明度 * @returns */
function getColorOpacity(color, opacity) {var theColor = color.toLowerCase();//十六进制颜色值的正则表达式var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;// 如果是16进制颜色if (theColor && r.test(theColor)) {if (theColor.length === 4) {var sColorNew = "#";for (var i = 1; i < 4; i += 1) {sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));}theColor = sColorNew;}//处理六位的颜色值var sColorChange = [];for (var i = 1; i < 7; i += 2) {sColorChange.push(parseInt("0x" + theColor.slice(i, i + 2)));}return "rgba(" + sColorChange.join(",") + "," + opacity + ")";}return theColor;
}

求两个颜色之间的渐变值

/*** 求两个颜色之间的渐变值* @param {string} startColor 开始的颜色* @param {string} endColor 结束的颜色* @param {number} step 颜色等分的份额* */
function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {let startRGB = hexToRgb(startColor, false); //转换为rgb数组模式let startR = startRGB[0];let startG = startRGB[1];let startB = startRGB[2];let endRGB = hexToRgb(endColor, false);let endR = endRGB[0];let endG = endRGB[1];let endB = endRGB[2];let sR = (endR - startR) / step; //总差值let sG = (endG - startG) / step;let sB = (endB - startB) / step;let colorArr = [];for (let i = 0; i < step; i++) {//计算每一步的hex值 let hex = rgbToHex('rgb(' + Math.round((sR * i + startR)) + ',' + Math.round((sG * i + startG)) + ',' + Math.round((sB *i + startB)) + ')');colorArr.push(hex);}return colorArr;
}

将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)

function hexToRgb(sColor, str = true) {let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;sColor = sColor.toLowerCase();if (sColor && reg.test(sColor)) {if (sColor.length === 4) {let sColorNew = "#";for (let i = 1; i < 4; i += 1) {sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));}sColor = sColorNew;}//处理六位的颜色值let sColorChange = [];for (let i = 1; i < 7; i += 2) {sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));}if (!str) {return sColorChange;} else {return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;}} else if (/^(rgb|RGB)/.test(sColor)) {let arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",")return arr.map(val => Number(val));} else {return sColor;}
};

将rgb表示方式转换为hex表示方式

function rgbToHex(rgb) {let _this = rgb;let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;if (/^(rgb|RGB)/.test(_this)) {let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");let strHex = "#";for (let i = 0; i < aColor.length; i++) {let hex = Number(aColor[i]).toString(16);hex = String(hex).length == 1 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位if (hex === "0") {hex += hex;}strHex += hex;}if (strHex.length !== 7) {strHex = _this;}return strHex;} else if (reg.test(_this)) {let aNum = _this.replace(/#/, "").split("");if (aNum.length === 6) {return _this;} else if (aNum.length === 3) {let numHex = "#";for (let i = 0; i < aNum.length; i += 1) {numHex += (aNum[i] + aNum[i]);}return numHex;}} else {return _this;}
}

JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串

/**
* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
* @param {string} color 为传入的十六进制的色值
* @param {number} alpha rgba的透明度
*/
function colorToRgba(color, alpha = 0.3) {color = rgbToHex(color)// 十六进制颜色值的正则表达式var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$//* 16进制颜色转为RGB格式 */let sColor = color.toLowerCase()if (sColor && reg.test(sColor)) {if (sColor.length === 4) {var sColorNew = '#'for (let i = 1; i < 4; i += 1) {sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))}sColor = sColorNew}// 处理六位的颜色值var sColorChange = []for (let i = 1; i < 7; i += 2) {sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))}// return sColorChange.join(',')return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'}else {return sColor}
}

JavaScript处理颜色常用方法相关推荐

JavaScript 原型链常用方法
JavaScript 原型链常用方法对象属性类型数据属性 Configurable(表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性) En ...
javascript 数字的常用方法
Number 是javascript 的基本数据类型,数字,常用的就是获取几位小数点,和把字符串转成数字,下面我们来介绍下number的常用方法创建数字的方式 let number=99; cons ...
———— javascript中数组常用方法总结 ————
在javascript的基础编程中,数组是我们最常遇到的,那么数组的一些常用方法也是我们必须要掌握的,下面我们总结一下数组中常用的方法. toString()和valueOf()方法 toString ...
JavaScript原生对象常用方法总结
这是4年前学习JavaScript基础的学习笔记,当初是照着W3School教程学习的,4年恍然如云烟,仿佛还在昨天.现发布与此,留作纪念,纪念那段不悔的青葱岁月. 下面都是我学习W3C ...
初学JavaScript之颜色小游戏
/*老师布置的的颜色小游戏的作业,根据问题显示的文字找出对应的颜色判断小游戏,可能有很多需要改进的代码,后面会多多改进的,谢谢2018-07-15 12:45:59*/<!DOCTYPE htm ...
JavaScript中开发常用方法-总结-持续更新
数组的常用方法 length length 是一个可读可写的属性,用来表示数组的长度(即数组元素个数).通过访问 length 属性,可以获取数组长度:而通过修改 length 的值,可以增加或减少数 ...
【JavaScript】JavaScript Date 对象常用方法大全，例如：getDate、getDay、getFullYear、getHours等（包括作用、语法、参数解析、详细用例）
JavaScript Date常用方法 1.getDate() 方法 2.getDay() 方法 3.getFullYear() 方法 4.getHours() 方法 5.getMillisecond ...
JavaScript中input常用方法
表单对象常用事件: onfocus:在表单元素收到输入焦点时触发: onblur:在表单元素失去输入焦点时触发. 如:文本框失去焦点时,以下代码将调用myfun()函数. 表单控件元素对象常用方法 b ...
JavaScript的数组常用方法
数组常用方法 1. push => 语法 arr.push(数据1, 数据2, 数据3, ...) => 作用把所有的参数按照顺序追加到数组的末尾 => 返回值,追加以后数组的长度 ...

JavaScript处理颜色常用方法

JavaScript处理颜色常用方法

获取指定颜色的低透明度

求两个颜色之间的渐变值

将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)

将rgb表示方式转换为hex表示方式

JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串

JavaScript处理颜色常用方法相关推荐

最新文章

热门文章