bsc/clubinfo-2024-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

js random colors

Browse Source
This commit is contained in:
bach 2024-11-29 16:06:41 +01:00
parent f980afb00c
commit fea60e8cbd
2 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
cours_vanilla_js/script.js
View File

@ -96,21 +96,48 @@ titre.classList.add('titre');
// on insert l'element html dans la page // on insert l'element html dans la page
body.append(titre); body.append(titre);
let nbr_rond = 20+ Math.random()*180;
// on boucle pour créer x elements // on boucle pour créer x elements
// a : la valeur de départ de l'index (i) // a : la valeur de départ de l'index (i)
// b : tant que b est vrai, la boucle continue // b : tant que b est vrai, la boucle continue
// c : la valeur d'incrémentation de l'index (i) // c : la valeur d'incrémentation de l'index (i) (comment i évolue entre chaque boucle)
// //
// a b c // a b c
// -------- ------ --- // ____|____ __|_____ _|_
// | | | | | | for (let i = 0; i < nbr_rond; i++) {
for (let i = 0; i < 10; i++) {
let monrond = document.createElement('div'); let monrond = document.createElement('div');
monrond.classList.add('rond'); monrond.classList.add('rond');
monrond.innerText = i; // monrond.innerText = i;
// math.random renvoie un nombre entre 0 et 1 (ex 0.45) // math.random renvoie un nombre entre 0 et 1 (ex 0.45)
// donc pour avoir un nombre entre 0 et 100 on fait Math.rndom()*100 (ex 0.45*100=45)
// on écrit des propriétées css sur notre élément
monrond.style.top = Math.random()*window.innerHeight +"px"; monrond.style.top = Math.random()*window.innerHeight +"px";
monrond.style.left = Math.random()*window.innerWidth +"px"; monrond.style.left = Math.random()*window.innerWidth +"px";
// taille aléatoire
let cotecarre = 10 + Math.random()*90;
monrond.style.width = monrond.style.height = cotecarre +"px";
// https://css-tricks.com/almanac/properties/b/border-radius/
monrond.style.borderRadius = cotecarre/2 +"px";
// couleur aléatoire
// en rgb
// let r = Math.random()*255;
// let g = Math.random()*255;
// let b = Math.random()*255;
// 'rgb(r,g,b)'
// monrond.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
// monrond.style.backgroundColor = `rgb(${r},${g},${b})`;
// en hsl
// https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl
// 'hsl()'
let h = Math.random()*360;
let s = 30 + Math.random()*20;
let l = 40 + Math.random()*20;
monrond.style.backgroundColor = `hsl(${h},${s}%,${l}%)`;
body.append(monrond); body.append(monrond);
} }

2
cours_vanilla_js/style.css
View File

@ -8,7 +8,7 @@ div.rond{
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;
background-color: red; background-color: rgb(250, 0, 250);
/* top:50px; /* top:50px;
left:78px; */ left:78px; */
position: absolute; position: absolute;