javascript - application rgb, rgba, hsl, hsla

Transcription

-------Couleurs HTML / JavaScript
(Programmation Internet pour débutants)
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
[email protected]
Il y a plusieurs façons de spécifier une couleur en HTML (je dis bien
HTML, pas JavaScript) :
1. « #HexHexHexHexHexHex » ou « #HexHexHex » ;
2. « rgb ( Red , Green , Blue ) » en décimales:
3. « rgba ( Redmax256 , Greenmax256 , Bluemax256 , alpha% ) » en
décimales:
4. « hsl » : Hue (0-360) , Saturation (0-100) % , Luminosity (0-100) %
5. « hsls » : Hue (0-360) , Saturation (0-100) % , Luminosity (0-100) % ,
Alpha (0-1).
6. Directement le nom de la couleur : red, green, blue, cyan,
Remarque :
« rgb », « rgba », « hsl », « hsla » ne fonctionnent qu’en HTML, et pas
directement en JavaScript.
Voici un programme qui utilise ces commandes en JavaScript, mais en fait
par le truchement du HTML.
J’utilise ce petit jeu quand je dois me détendre rapidement l’esprit en faisant
quelque chose pour ne rien faire, je rafraîchis continuellement la page
jusqu’à ce que tous les écrits soient bien lisibles, et toutes les couleurs
uniques.
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
<style>
.pad {padding:10 0}
</style>
<table style="width:450" rules="all"><tr><td>
<div style="width:250;font-family:consolas"
id="outp"></div>
</td><td>
<table style="text-align:center;color:yellow">
<tr>
<td id="dispr" style="width:33%;fontweight:900"></td>
<td id="dispg" style="width:33%;fontweight:900"></td>
<td id="dispb" style="width:33%;fontweight:900"></td>
</tr>
<tr>
<td colspan="3">
<div style="width:200;height:90" id="disp"></div>
</td>
</tr>
</table>
</td></tr></table>
<script> "use strict";
let red,green,blue;
let rgb = _ => {
red = Math.round(Math.random()*255),
green = Math.round(Math.random()*255),
blue = Math.round(Math.random()*255);
return {red,green,blue};
}
let htmlCol = _ => {
const v = [
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'A', 'B', 'C', 'D', 'E', 'F'
];
let col = "#";
for (let k = 0; k < 6; k++)
col += v[Math.round(Math.random() * 15)];
return col;
Palettes couleurs Hexa
- 2 / 15 - jeudi, 4. avril 2019 (10:46 )
};
JavaScript Tome-II
let dispbckg = _ => {
let outp = document.getElementById("outp");
let col = htmlCol();
outp.innerHTML += col;
red = `0x${col.substr(1, 2)}`,
green = `0x${col.substring(3, 5)}`,
blue = `0x${col.substr(5, 2)}`;
outp.innerHTML +=
`<div style="font-family:'consolas'">`;
outp.innerHTML +=
`<br>${"RED".padEnd(7, ".")} =
${red} = ${eval(red)} , `;
outp.innerHTML +=
`<br>${"GREEN".padEnd(7, ".")} =
${green} = ${eval(green)} , `;
outp.innerHTML +=
`<br>${"BLUE".padEnd(7, ".")} =
${blue} = ${eval(blue)}`;
outp.innerHTML += `</div>`;
document.getElementById("disp")
.style.backgroundColor = col;
red = `${col.substr(1, 2)}`,
green = `${col.substring(3, 5)}`,
blue = `${col.substr(5, 2)}`;
document.getElementById("dispr")
.style.backgroundColor = "#"+red+"0000";
document.getElementById("dispr")
.innerHTML = red;
document.getElementById("dispg")
.style.backgroundColor = "#00"+green+"00";
document.getElementById("dispg")
.innerHTML = green;
document.getElementById("dispb")
.style.backgroundColor = "#0000"+blue;
document.getElementById("dispb")
- 3 / 15 - jeudi, 4. avril 2019 (10:46 )
.innerHTML = blue;
};
JavaScript Tome-II
dispbckg();
/*RGB*/
let s="",br,bg,bb,ba,cr,cg,cb,ca;
br=Math.round(Math.random()*255),
bg=Math.round(Math.random()*255),
bb=Math.round(Math.random()*255),
cr=Math.round(Math.random()*255),
cg=Math.round(Math.random()*255),
cb=Math.round(Math.random()*255);
s+=`<fieldset style="font-weight:900;`+
`font-size:15pt;text-align:center">`;
s+=`<div class='rgb1 pad' style='border:solid 3mm;`+
`background:rgb(${br} , ${bg} , ${bb});`+
`color:rgb(${cr} , ${cg} , ${cb})'>BACKGROUND RGB 1`+
`<br>rgb(${br} , ${bg} , ${bb})</div>`;
s+=`<div class="rgb2 pad" style='`+
`color:rgb(${br},${bg},${bb});`+
`background:rgb(${cr},${cg},${cb})'>FOREGROUND RGB 2`+
`<br>rgb(${cr} , ${cg} , ${cb})</div>`;
/*RGBA*/
br=Math.round(Math.random()*255),
bg=Math.round(Math.random()*255),
bb=Math.round(Math.random()*255),
ba=Math.random(),
cr=Math.round(Math.random()*255),
cg=Math.round(Math.random()*255),
cb=Math.round(Math.random()*255),
ca=Math.random();
s+=`<fieldset style="font-weight:900;`+
`font-size:15pt;text-align:center">`;
s+=`<div class="rgba1 pad" style='margin-top:2.5px;`+
- 4 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
`color:rgba(${cr},${cg},${cb},${ca});`+
`background:rgba(${br},${bg},${bb},${ba})'>`+
`BACKGROUND RGBA 2<br>`+
`rgba(${br} , ${bg} , ${bb} , ${ba.toFixed(2)})`+
`</div>`+
`<div class="rgba2 pad" style='background:`+
`rgba(${cr},${cg},${cb},${ca});color:`+
`rgba(${br},${bg},${bb},${ba})'>`+
`FOREGROUND RGBA 2<br>`+
`rgba(${cr} , ${cg} , ${cb} , ${ca.toFixed(2)})`+
`</div>`;
/*HSL*/
let bh,bs,bl,bA,ch,cs,cl,cA;
bh=Math.round(Math.random()*360),
bs=Math.round(Math.random()*100),
bl=Math.round(Math.random()*100);
ch=Math.round(Math.random()*360),
cs=Math.round(Math.random()*100),
cl=Math.round(Math.random()*100);
s+=`<div class='hsl1 pad' style=`+
`'margin-top:5px;border:solid 3mm;`+
`background:hsl(${bh},${bs}%,${bl}%);`+
`color:hsl(${ch},${cs}%,${cl}%)'>`+
`BACKGROUND HSL 1<br>`+
`hsl(${bh} , ${bs}% , ${bl}%)</div>`+
`<div class='hsl2 pad' style='`+
`background:hsl(${ch},${cs}%,${cl}%);`+
`color:hsl(${bh},${bs}%,${bl}%)'>`+
`FOREGROUND HSL 2`+
`<br>hsl(${ch} , ${cs}% , ${cl}%)</div>`;
/*HSLA*/
bh=Math.round(Math.random()*360),
bl=Math.round(Math.random()*100);
bs=Math.round(Math.random()*100),
bA=Math.random(),
ch=Math.round(Math.random()*360),
cl=Math.round(Math.random()*100),
- 5 / 15 - jeudi, 4. avril 2019 (10:46 )
cs=Math.round(Math.random()*100),
cA=Math.random();
JavaScript Tome-II
s+=`<div class='hsla1 pad' style=`+
`'margin-top:5px;border:solid 3mm;background:`+
`hsla(${bh},${bs}%,${bl}%,${bA.toFixed(2)});`+
`color:hsla(${ch},${cs}%,${cl}%,`+
`${cA.toFixed(2)})'>BACKGROUND HSLA 1<br>`+
`hsla(${bh} , ${bs}% , ${bl}% , ${bA.toFixed(2)})`+
`</div>`+
`<div class='hsla2 pad' style='background:`+
`hsla(${ch},${cs}%,${cl}%,${cA.toFixed(2)});`+
`color:hsla(${bh},${bs}%,${bl}%,`+
`${bA.toFixed(2)})'>FOREGROUND HSLA 2`+
`<br>hsla(${ch} , ${cs}% , ${cl}% , `+
`${cA.toFixed(2)})</div>`;
`</fieldset>`;
document.write(s);
</script>
Une des exécutions :
- 6 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Une autre exécution :
- 7 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Une troisième exécution :
- 8 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Une quatrième exécution :
- 9 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Une cinquième exécution :
- 10 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
- 11 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Kinshasa, le jeudi 4 avril 2019 - 10:46:57 PM
Mots-clés :
rgb, rgba, hsl. hsla, couleurs, HTML, JavaScript, Internet, Application, couleur, Alpha, Saturation, Luminosité, Luminosity,
background, foreground, color
- 12 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé, bénévole, sans
aucun conflit d’intérêt ou liens d'intérêts ou contrainte
promotionnelle avec qui qu’il soit ou quelqu’organisme ou
institution / organisation que ce soit, étatique, paraétatique ou
privé, industriel ou commercial en relation avec le sujet présenté.
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
[email protected]
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-DosageDes-Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-HasardDes-Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-enPalettes couleurs Hexa
- 13 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Jesus-Christ-Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire
• https://www.scribd.com/document/375349851/La-variableThis
• https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS
• https://www.scribd.com/document/374789297/FormatInterne-Des-Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-enJavaScript
• https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation
• https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/PropertyDescriptors
• https://www.scribd.com/document/373833282/l-ObjetGlobal-Window
• https://www.scribd.com/document/372665249/JavascriptTome-II
• https://www.scribd.com/document/355291488/motiliteoculaire-2
• https://www.scribd.com/document/355291239/motiliteoculaire-I
• https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs
•
https://www.scribd.com/document/321168468/Renseignement
s-Id-et-Anthropometriques
• https://www.scribd.com/document/320856721/Emission-31Palettes couleurs Hexa
- 14 / 15 - jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Jul-2016
•
https://www.scribd.com/document/318182982/ComplicationVisuelle-du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/RapportEntre-Oxymetrie-Et-Type-Respiration
•
https://www.scribd.com/document/315746265/ClassificationDes-Medicaments
•
https://www.scribd.com/document/315745909/IncongruencesHeresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration
- 15 / 15 - jeudi, 4. avril 2019 (10:46 )

javascript - application rgb, rgba, hsl, hsla

Transcription

Documents pareils

Cours de Math niveau collège

Pour faire partie du Profil math/science 1 secondaire

Liste logiciels

Ph. Lepeuple - Integraales Agora

Formation - Ecole Mohammadia d`ingénieurs

NOM : ……………………………..……………… Prénom

Financement voyage Math en Jeans

Math Log - Brockton Public Schools

Epreuve_4_-_Question..

Défis math