Facebook
Télécharger
Noter:

Ajouté le 2022-12-11
Visionné 134 fois

Bandeau lumineux LED en JavaScript

Description



Comme au magasin, ce bandeau affiche le texte de droite à gauche avec les LED rouges.

Télécharger le zip du script
(Téléchargé 18 fois)



<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bandeau limineux</title>
<script src="bandeau-lumineux.js"></script>
</head>
<body>

<!-- affichera un bandeau lumineux avec le texte voulu et prendra la taille de la div -->
<div id="C2_bandeau"></div>
<div id="C2_bandeau2"></div>

<script>
C2_bandeau(

//ID de la div bandeau
"C2_bandeau",

//texte à afficher
//ponctuation prise en charge : !?€-_/=+\\*()#'\"&.:;,
//si utilisation du \, en mettre deux : \\
"BIENVENUE ! Une jolie phrase. 0 + 0 = ? Promo : 12€ le KG. Colis #544",

);

//avec des paramètres de taille
C2_bandeau(

//ID de la div bandeau
"C2_bandeau2",

//texte à afficher
//ponctuation prise en charge : !?€-_/=+\\*()#'\"&.:;,
//si utilisation du \, en mettre deux : \\
"Un texte sur le bandeau 2",

//taille des LED
15,//px

//définir une taille pour le bandeau ou le laisser prendre toute la largeur
300,//px

);

</script>
</body>
</html>

/**
Realisation : Steve TENZA
Site internet : www.c2script.com
(c) 2022
*/
function C2_bandeau(id_name, texte, px = 7, bandeau_width = false){

//on met le texte en majuscules
//on coupe le texte, lettre par lettre
var texte = texte.toUpperCase().split('');

//init
var id_name = `#${id_name}`;
var classe_point = "C2_bandeau_point" + Math.floor(Math.random() * 10000);
var querySelector = '';
var taille_texte = 0;
var taille_lettre = 0;
var max = 0;
var lettres_parcourues = 0;
var emplacement_lettre = 0;
var lettres_coords = {
"A":{
1: [2, 3],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1, 4],
5: [1, 4],
},
"B":{
1: [1, 2, 3],
2: [1, 4],
3: [1, 2, 3],
4: [1, 4],
5: [1, 2, 3],
},
"C":{
1: [2, 3, 4],
2: [1],
3: [1],
4: [1],
5: [2, 3, 4],
},
"D":{
1: [1, 2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [1, 2, 3],
},
"E":{
1: [1, 2, 3, 4],
2: [1],
3: [1, 2, 3],
4: [1],
5: [1, 2, 3, 4],
},
"F":{
1: [1, 2, 3, 4],
2: [1],
3: [1, 2, 3],
4: [1],
5: [1],
},
"G":{
1: [2, 3],
2: [1],
3: [1, 3, 4],
4: [1, 4],
5: [2, 3],
},
"H":{
1: [1, 4],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1, 4],
5: [1, 4],
},
"I":{
1: [1, 2, 3],
2: [2],
3: [2],
4: [2],
5: [1, 2, 3],
},
"J":{
1: [2, 3, 4],
2: [4],
3: [4],
4: [1, 4],
5: [2, 3],
},
"K":{
1: [1, 4],
2: [1, 3],
3: [1, 2],
4: [1, 3],
5: [1, 4],
},
"L":{
1: [1],
2: [1],
3: [1],
4: [1],
5: [1, 2, 3, 4],
},
"M":{
1: [1, 5],
2: [1, 2, 4, 5],
3: [1, 3, 5],
4: [1, 5],
5: [1, 5],
},
"N":{
1: [1, 4],
2: [1, 2, 4],
3: [1, 3, 4],
4: [1, 4],
5: [1, 4],
},
"O":{
1: [2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [2, 3],
},
"P":{
1: [1, 2, 3, 4],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1],
5: [1],
},
"Q":{
1: [2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 3],
5: [2, 4],
},
"R":{
1: [1, 2, 3, 4],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1, 3],
5: [1, 4],
},
"S":{
1: [1, 2, 3, 4],
2: [1],
3: [1, 2, 3, 4],
4: [4],
5: [1, 2, 3, 4],
},
"T":{
1: [1, 2, 3, 4, 5],
2: [3],
3: [3],
4: [3],
5: [3],
},
"U":{
1: [1, 4],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [2, 3],
},
"V":{
1: [1, 5],
2: [1, 5],
3: [1, 5],
4: [2, 4],
5: [3],
},
"W":{
1: [1, 5],
2: [1, 5],
3: [1, 5],
4: [1, 3, 5],
5: [2, 4],
},
"X":{
1: [1, 5],
2: [2, 4],
3: [3],
4: [2, 4],
5: [1, 5],
},
"Y":{
1: [1, 5],
2: [2, 4],
3: [3],
4: [3],
5: [3],
},
"Z":{
1: [1, 2, 3, 4, 5],
2: [4],
3: [3],
4: [2],
5: [1, 2, 3, 4, 5],
},

//poncutations : !?€-_\/=+*()#'"&.:;,
"?":{
1: [2, 3],
2: [1, 4],
3: [3],
5: [3],
},
"!":{
1: [1],
2: [1],
3: [1],
5: [1],
},
"€":{
1: [2, 3],
2: [1, 4],
3: [1, 2],
4: [1, 4],
5: [2, 3],
},
"-":{
3: [1, 2, 3],
},
"_":{
5: [1, 2, 3, 4],
},
"\\":{
1: [1],
2: [2],
3: [3],
4: [4],
5: [5],
},
"/":{
1: [5],
2: [4],
3: [3],
4: [2],
5: [1],
},
"=":{
2: [1, 2, 3],
4: [1, 2, 3],
},
"+":{
1: [3],
2: [3],
3: [1, 2, 3, 4, 5],
4: [3],
5: [3],
},
"*":{
1: [2],
2: [1, 2, 3],
3: [2],
},
"(":{
1: [2],
2: [1],
3: [1],
4: [1],
5: [2],
},
")":{
1: [1],
2: [2],
3: [2],
4: [2],
5: [1],
},
"#":{
1: [2, 4],
2: [1, 2, 3, 4, 5],
3: [2, 4],
4: [1, 2, 3, 4, 5],
5: [2, 4],
},
"'":{
1: [1],
2: [1],
},
'"':{
1: [1, 3],
2: [1, 3],
},
"&":{
1: [2, 3],
2: [1, 4],
3: [2, 3],
4: [1, 4],
5: [2, 3, 5],
},
".":{
5: [1],
},
",":{
4: [1],
5: [1],
},
":":{
3: [1],
5: [1],
},
";":{
3: [1],
5: [1],
},

//espace
" ":{
},

//chiffres
"0":{
1: [2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [2, 3],
},
"1":{
1: [1, 2],
2: [2],
3: [2],
4: [2],
5: [1, 2, 3],
},
"2":{
1: [2, 3],
2: [1, 4],
3: [3],
4: [2],
5: [1, 2, 3, 4],
},
"3":{
1: [2, 3],
2: [1, 4],
3: [3],
4: [1, 4],
5: [2, 3],
},
"4":{
1: [3],
2: [2, 3],
3: [1, 3],
4: [1, 2, 3, 4],
5: [3],
},
"5":{
1: [1, 2, 3],
2: [1],
3: [1, 2, 3],
4: [ 4],
5: [1, 2, 3],
},
"6":{
1: [2, 3],
2: [1],
3: [1, 2, 3],
4: [1, 4],
5: [2, 3],
},
"7":{
1: [1, 2, 3, 4],
2: [4],
3: [3],
4: [2],
5: [1],
},
"8":{
1: [2, 3],
2: [1, 4],
3: [2, 3],
4: [1, 4],
5: [2, 3],
},
"9":{
1: [2, 3],
2: [1, 4],
3: [2, 3, 4],
4: [4],
5: [2, 3],
}
};

//on met en place le CSS
let CSS = '<style type="text/css">'+
id_name + ' {'+
' background-color: black;'+
' padding:' + px + 'px;'+
(bandeau_width ? 'width:' + bandeau_width + 'px;' : '') +
'}'+
'.C2_bandeau_ligne {'+
' display: flex;'+
'}'+
'.' + classe_point + ' {'+
' width:' + px + 'px;'+
' height:' + px + 'px;'+
' border-radius:50%;'+
' box-shadow:0 0 1px red;'+
' display: inline-block;'+
' display: inline-block;'+
'}'+
'.C2_bandeau_rouge {'+
' background-color:red;'+
'}'+
'.C2_bandeau_noir {'+
' background-color:black;'+
'}'+
'</style>';
document.querySelector("head").insertAdjacentHTML("beforeend", CSS);


//prend la largeur du bandeau dynamiquement (affiche le nombre de led par rapport à la largeur)
var bandeau = document.querySelector(id_name);
var largeur_bandeau = bandeau.offsetWidth;
var nb_de_points = Math.floor(largeur_bandeau / px);
var depart = nb_de_points;


//crée le contenu du bandeau, toutes les LED
//on crée le bandeau
var contenu_bandeau = '';

for(y = 1; y <= 5; y ++){

contenu_bandeau += '<div class="C2_bandeau_ligne C2_bandeau_ligne' + y + '">';

for(z = 1; z <= nb_de_points; z ++){

contenu_bandeau += '<div class="' + classe_point + ' C2_bandeau_point_' + z + ' C2_bandeau_noir"></div>';

}
contenu_bandeau += "</div>";

}
bandeau.innerHTML = contenu_bandeau;



//chaque milisecondes on met à jour le bandeau en bougeant de droite à gauche pour lire
var interval_bandeau = setInterval(() => {

//on met toute les LED en noir
document.querySelectorAll(`${id_name} .${classe_point}`).forEach(elem => elem.classList.replace("C2_bandeau_rouge", "C2_bandeau_noir"));

//on parcours lettre par lettre
texte.forEach(lettre => {


lettres_parcourues ++;

//remet à zéro la taille de la lettre
if(lettre == ' ')
taille_lettre = 3;
else
taille_lettre = 0;


//parcour les coordonnées de la lettre pour allumer les LED correspondante
for(let ligne in lettres_coords[lettre]){

lettres_coords[lettre][ligne].forEach(point => {

led(ligne, point + emplacement_lettre);

//récupère le maximum de place que prend cette lettre
//si espace
if(lettre != ' '){

max = Math.max.apply(null, lettres_coords[lettre][ligne]);

if(max > taille_lettre)
taille_lettre = max;

}
});
}

emplacement_lettre += taille_lettre + 1;

});

taille_texte = emplacement_lettre;
depart -= 1;
emplacement_lettre = depart;
if(taille_texte == 0)
depart = nb_de_points;

}, 70);




//illuminer une LED en particulier
function led(ligne, point){

//pour gagner en ressource, on ne modifie pas les points qui ne sont pas présents sur le bandeau
if(point <= nb_de_points && point >= 0){


querySelector = document.querySelector(`${id_name} > .C2_bandeau_ligne${ligne} > .C2_bandeau_point_${point}`);

if(querySelector)
querySelector.classList.replace("C2_bandeau_noir", "C2_bandeau_rouge");

}
}
}



Besoin de travaux pour votre site ?

Je suis disponible, contactez-moi !

Commentaires

Ajouter un commentaire

Commenter
Pseudo/Nom
Email
Message
Captcha

Captcha temporairement HS, tapez 2 svp
memo2
Commenter
Pas encore de commentaire, soyez le premier !

Retour à la liste des scripts