Comment définir la couleur en javascript

Comment définir la valeur de couleur en JavaScript : 1. Utilisez la commande anglaise color, le code est [p{color:red;}] ; 2. Utilisez la couleur RVB, le code est [p{color :rvb(133,45,200 );}].

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Comment définir les valeurs de couleur en javascript :

1. Plusieurs méthodes de définition des valeurs de couleur dans les pages Web

1. Couleur de commande en anglais

p{color:red;}

2. Couleur RVB

Ceci est cohérent avec la couleur « RVB » dans « Photoshop », composée de « R(rouge) », « G ». (vert)`, `B(bleu)` utilise le rapport des trois couleurs pour correspondre à la couleur. Par exemple :

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

La valeur de chaque élément peut être un entier compris entre 0 et 255, ou un pourcentage compris entre 0% et 100%. Par exemple : `

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

` Le quatrième paramètre de RVB est la transparence, avec une valeur de 0-1

3 Couleur hexadécimale

Cette méthode de réglage des couleurs est une. méthode la plus couramment utilisée maintenant. Son principe est en fait le réglage RVB, mais la valeur de chaque élément est modifiée de 0-255 à 00-ff hexadécimal. Tels que :

p{color:#00ffff;}

4. valeur de couleur hsla, telle que hsla(360, 50%, 50%, .5) rouge translucide, cette méthode n'est pas compatible avec ie8 et versions antérieures

HSLA(H,S,L,A)

H : Teinte (ton). 0 (ou 360) représente le rouge, 120 représente le vert, 240 représente le bleu et d'autres valeurs peuvent également être utilisées pour spécifier les couleurs. La valeur est : 0 - 360

S : Saturation. La valeur est : 0,0% - 100,0%

L : Légèreté. La valeur est : 0,0% - 100,0%

A : Transparence Alpha. La valeur est comprise entre 0 et 1.

2. Générer des codes de couleur aléatoires

//方法一
 
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. Au cours du processus, nous rencontrons souvent le problème de la conversion des formats de couleurs entre eux. Le format hexadécimal et le format RVB peuvent être convertis entre eux. Cependant, le format RGBA possède l'attribut de transparence Alpha que les deux premiers n'ont pas. elle est différente des deux premières. La valeur alpha sera perdue lors de la conversion, la conversion n'est donc pas recommandée. Voici ma méthode de conversion des couleurs :

//十六进制转为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
    }
}

Recommandations d'apprentissage gratuites associées :

Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!