자바스크립트에서 색상을 설정하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 색상을 설정하는 방법

coldplay.xixi

풀어 주다： 2023-01-05 16:07:34

원래의

8850명이 탐색했습니다.

JavaScript에서 색상 값을 설정하는 방법: 1. 영어 명령 색상을 사용합니다. 코드는 [p{color:red;}]입니다. 2. RGB 색상을 사용합니다. 코드는 [p{color:rgb(133)입니다. ,45,200);}] .

자바스크립트에서 색상을 설정하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

자바스크립트에서 색상 값을 설정하는 방법:

1. 웹 페이지에서 색상 값을 설정하는 여러 가지 방법

1. 영어 명령 color

p{color:red;}

로그인 후 복사

2. `포토샵`의 `RGB` 색상과 동일하며 `R(빨간색)`, `G(녹색)`, `B(파란색)` 세 가지 색상의 비율로 일치합니다. 예:

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

로그인 후 복사

각 항목의 값은 0~255 사이의 정수 또는 0%~100% 사이의 백분율일 수 있습니다. 예: `

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

로그인 후 복사

`RGB의 네 번째 매개 변수는 투명도이며 값은 0-1

3, 16진수 색상

이 색상 설정 방법은 현재 더 일반적으로 사용되는 방법이며 그 원리는 실제로 RGB와 동일합니다. 설정하지만 각 항목의 값이 0~255에서 16진수 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: 채도입니다. 값은: 0.0% - 100.0%

L: 가벼움. 값은 0.0% - 100.0%

A: 알파 투명도입니다. 값은 0~1 사이입니다.

2. 임의의 색상 코드 생성

//方法一
 
function RandomColor1(){
 
    return &#39;#&#39;+Math.floor(Math.random()*255).toString(10)
 
}
 
//方法二
 
function RandomColor2(){
 
    return &#39;#&#39;+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=(&#39;00000&#39;+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 = &#39;0&#39; + hex;
 
}
 
    return &#39;#&#39; + hex; //返回‘#&#39;开头16进制颜色
 
}

로그인 후 복사

3. 색상 형식 변환

인코딩 과정에서 16진수 형식과 RGB 형식 중 색상 형식을 서로 변환하는 문제가 자주 발생합니다. 서로 변환할 수 있지만 RGBA 형식에는 처음 두 개에는 없는 Alpha 투명도 속성이 있으므로 처음 두 개로 변환하면 Alpha 값이 손실됩니다. 여기서는 색상 변환을 권장하지 않습니다. 방법:

//十六进制转为RGB
function hex2Rgb(hex) { 
    var rgb = []; // 定义rgb数组
    if (/^\#[0-9A-F]{3}$/i.test(hex)) {
    //判断传入是否为#三位十六进制数
        let sixHex = &#39;#&#39;;
        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(&#39;0x&#39; + kw)); //十六进制转化为十进制并存如数组
        });
        return `rgb(${rgb.join(&#39;,&#39;)})`; //输出RGB格式颜色
    } else {
        console.log(`Input ${hex} is wrong!`);
        return &#39;rgb(0,0,0)&#39;;
    }
}
//RGB转为十六进制
function rgb2Hex(rgb) {
    if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGB
        var hex = &#39;#&#39;; //定义十六进制颜色变量
        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 &#39;#000&#39;; //输入格式错误,返回#000
    }
}

로그인 후 복사