javascript设置颜色值的几种方法

一、网页中设置颜色值的几种方法

1、英文命令颜色

p{color:red;}

2、RGB颜色

这个与 `photoshop` 中的 `RGB` 颜色是一致的，由 `R(red)`、`G(green)`、`B(blue)`三种颜色的比例来配色。如：

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：`

p{color:rgb(20%,33%,25%);}

`RGB的第四个参数是透明度，取值为0-1

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。如：

p{color:#00ffff;}

4、hsla颜色值，如 hsla(360, 50%, 50%, .5) 半透明红色，此方式ie8及以下不兼容

HSLA(H,S,L,A)

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%

A：Alpha透明度。取值0~1之间。

二、生成随机颜色代码

//方法一function RandomColor1(){return '#'+Math.floor(Math.random()*255).toString(10)}//方法二function RandomColor2(){return '#'+Math.floor(Math.random()*0xffffff).toString(16)}//方法三//使用RGB来表示，并使用es6语法//使用RGB的好处，一是代码少，简单好实现；二是可以支持透明度，透明度也可以支持随机颜色。function RandomColor3 () {const r = Math.round(Math.random()*255);const g = Math.round(Math.random()*255);const b = Math.round(Math.random()*255);const a = ( (Math.random()*5 + 5) / 10 ).toFixed(2)//随机颜色返回的是一个0.5到1 的两位小数;如果生成的0-1就直接是const a =Math.random()const color = `rgba(${r},${g},${b},${a})`console.log(color)return color}//方法四function RandomColor4 (){//随机一个32的4次幂然后取整，这个值接近fffff的十进制var random=parseInt(Math.random()*Math.pow(32,4));//random返回一个位数不确定的整数，然后toString(16)转化成16进制，//如果这个随机数位数不够四位的话前边拼接5个0，最后截取后四位var v=('00000'+random.toString(16)).substr(-4);return v}//方法五function RandomHColor5() { //随机生成十六进制颜色var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位hex = '0' + hex;}return '#' + hex; //返回‘#'开头16进制颜色}

三、颜色格式转化

在编码过程中，经常会遇到要将颜色格式相互转化的问题,其中十六进制格式和RGB格式是可以相互转化的，但是RGBA格式由于多了前两者没有的Alpha透明属性，所以和前两者转化会丢失Alpha值，不建议进行转化，下面是我的颜色转化的方法：

//十六进制转为RGB
function hex2Rgb(hex) { var rgb = []; // 定义rgb数组if (/^\#[0-9A-F]{3}$/i.test(hex)) {//判断传入是否为#三位十六进制数let sixHex = '#';hex.replace(/[0-9A-F]/ig, function(kw) {sixHex += kw + kw; //把三位16进制数转化为六位});hex = sixHex; //保存回hex}if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数hex.replace(/[0-9A-F]{2}/ig, function(kw) {rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组});return `rgb(${rgb.join(',')})`; //输出RGB格式颜色} else {console.log(`Input ${hex} is wrong!`);return 'rgb(0,0,0)';}
}
//RGB转为十六进制
function rgb2Hex(rgb) {if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGBvar hex = '#'; //定义十六进制颜色变量rgb.replace(/\d{1,3}/g, function(kw) { //提取rgb数字kw = parseInt(kw).toString(16); //转为十六进制kw = kw.length < 2 ? 0 + kw : kw; //判断位数，保证两位hex += kw; //拼接});return hex; //返回十六进制} else {console.log(`Input ${rgb} is wrong!`);return '#000'; //输入格式错误,返回#000}
}

javascript设置颜色值的几种方法相关推荐

css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
JavaScript 获得对象的N种方法 [转]
JavaScript 获得对象的N种方法 [转] 方法如下: document.getElementById(ID) //获得指定ID值的对象 document.getElementsB ...
JavaScript刷新当前页面的三种方法，载入新文档替换当前页面
通过JavaScript刷新当前页面的三种方法代码就可以简单的实现,首先我们来看三种刷新当前页的方法: reload() 方法; replace() 方法; 页面自动刷新; 方法1:reload() ...
LoadRunner设置检查点的几种方法介绍
LoadRunner设置检查点的几种方法介绍发布时间: 2011-5-03 11:53 作者: 一米阳光做测试来源: 51Testing软件测试网采编字体: 小中大 | ...
angular6 设置全局变量_angularjs 设置全局变量的3种方法
angularjs 设置全局变量的3种方法 angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是,在ng-app中定义的全局变量,在不同的ng- ...
Allegro自定义设置快捷键的三种方法
Allegro自定义设置快捷键的三种方法: 1.在Allegro PCB editor 命令窗口直接定义 2.通过修改用户变量env文件来设置快捷键 3.定义笔画为快捷键 1.在Allegro PCB ...
JavaScript 数组遍历的五种方法（转）
转自:JavaScript 数组遍历的五种方法这篇文章主要介绍了JavaScript 数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下在使用 JavaS ...
OMP 设置线程的3种方法
设置线程的3种方法 1. 在子语句 data clause 中设置 : num_threads( ) #pragma omp parallel for default(none) shared(x) ...
html获取cookiejs,javascript设置和获取cookie的方法实例详解
本文实例讲述了javascript设置和获取cookie的方法.分享给大家供大家参考,具体如下: 1. 设置cookie function setCookie(cookieName,cookieVal ...

javascript设置颜色值的几种方法

javascript设置颜色值的几种方法相关推荐

最新文章

热门文章