JavaScriptで色を設定する方法

JavaScript でカラー値を設定する方法: 1. 英語のコマンド color を使用します。コードは [p{color:red;}] です。 2. RGB カラーを使用します。コードは [p{color :rgb(133,45,200 );}]。

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター。

JavaScript で色の値を設定する方法:

1. Web ページで色の値を設定するいくつかの方法

1. 英語コマンド color

p{color:red;}

2. RGB カラー

これは、「R(赤)」、「G」で構成される「photoshop」の「RGB」カラーと一致します。 (緑)`、B(青)`は3色の比率を利用して色を合わせます。例:

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

各項目の値は、0 ～ 255 の整数、または 0% ～ 100% の割合です。例: `

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

`RGB の 4 番目のパラメータは透明度で、値は 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：色相（トーン）。 0 (または 360) は赤を表し、120 は緑を表し、240 は青を表し、その他の値を使用して色を指定することもできます。値は次のとおりです: 0 ～ 360

#S: 彩度。値は: 0.0% - 100.0%

L: 明度。値は: 0.0% - 100.0%

A: アルファ透明度。値は 0 ～ 1 です。

2. ランダムなカラーコードの生成

//方法一
 
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 = &#39;0&#39; + hex;
 
}
 
    return &#39;#&#39; + hex; //返回‘#&#39;开头16进制颜色
 
}

3. カラー形式の変換

エンコード時プロセス中に、カラー形式を相互に変換するという問題がよく発生します。16 進形式と RGB 形式は相互に変換できます。ただし、RGBA 形式には、最初の 2 つが持たないアルファ透明属性があるため、最初の 2 つとは異なります。変換するとアルファ値が失われるため、変換はお勧めできません。私のカラー変換方法は次のとおりです:

//十六进制转为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 RGB
        var 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 &#39;#000&#39;; //输入格式错误,返回#000
    }
}

関連する無料学習の推奨事項: JavaScript ビデオ チュートリアル

以上がJavaScriptで色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。