Facebook
Télécharger
Noter:

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

Horloge réveil et Compte à rebours JavaScript

Description



Une horloge de type radio réveil avec les chiffres LED illuminés !

Options possibles :

- Horloge
- Compte à rebours

Cliquez ici pour télécharger le zip du script
(Téléchargé 14 fois)



<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Compte à rebours</title>
<script src="horloge-compte-a-rebours.js"></script>
<style>
body,html {
margin: 0;
padding: 0;
text-align:center;
}
</style>
</head>
<body>

<!-- affichera le compteur -->
<h1>Compte à rebours :</h1>
<div id="compteur"></div>

<h1>Heure actuelle :</h1>
<div id="compteur_horloge"></div>

<h1>UTC -2H :</h1>
<div id="compteur_utc_moins_2"></div>

<h1>UTC +3H :</h1>
<div id="compteur_utc_plus_3"></div>

<script>
C2_compteur({

//ID de la div où il faut afficher le compte à rebours ou l'horloge
"div_id": "compteur",

//si on définit une date, le type se transforme en compte à rebours
"date": "2022-12-13",
"heure" : "00:00:00",
"utc": "+02:00",

//taille des chiffres
"taille": 50
});

//affiche une horloge avec l'heure actuelle
C2_compteur({
"div_id": "compteur_horloge"
});

//affiche une horloge avec l'heure -2H
C2_compteur({
"div_id": "compteur_utc_moins_2",
"utc": "-02:00",
});

//affiche une horloge avec l'heure +3H et une taille de 10
C2_compteur({
"div_id": "compteur_utc_plus_3",
"utc": "+03:00",
"taille": 10
});

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

/**
Realisation : Steve TENZA
Site internet : www.c2script.com
(c) 2022
*/
function C2_compteur(options = {}){

/**
@div_id : l'ID de la div compteur
@date : YYYY-MM-DD
@heure : HH:MM:SS
@utc : exemple : +02:00, -07:00,...
@taille : taille du compteur (par 2, sinon le calcul sera mal divisé) 10 = petit, 100 = grand
*/
let div_id = options.div_id,
date = options.date ?? false,
heure = options.heure ?? false,
utc = options.utc ?? '',
taille = options.taille ?? 20;

//horloge ou compte_a_rebours
var type = date ? 'compte_a_rebours' : 'horloge';

console.log(taille);
var id_unique = Math.floor(Math.random() * 10000);

//on crée le CSS pour ce compteur
var css_compteur = '<style type="text/css">'+
'#' + div_id + ' {'+
' width: 100%;'+
' background-color: black;'+
' display: flex;'+
' justify-content: center;'+
' align-items: center;'+
' height: calc(' + C2_compteur_taille(80, taille) + 'px * 2 + ' + C2_compteur_taille(20, taille) + 'px * 3 + ' + C2_compteur_taille(20, taille) + 'px);'+
' padding-top: ' + C2_compteur_taille(20, taille) + 'px;'+
'text-align: left;'+
'}'+

'.C2_compteur_chiffre' + id_unique + ' {'+
' width: ' + taille + 'px;'+
' height: 100%;'+
' position: relative;'+
' margin: ' + C2_compteur_taille(10, taille) + 'px;'+
'}'+

'.C2_compteur_barre_chiffre' + id_unique + ' {'+
' background-color: red;'+
' position: relative;'+
'}'+

'.C2_compteur_deux_points' + id_unique + ' > div {'+
' height: ' + C2_compteur_taille(20, taille) + 'px;'+
' width: ' + C2_compteur_taille(20, taille) + 'px;'+
' background-color: red;'+
' margin: ' + C2_compteur_taille(50, taille) + 'px ' + C2_compteur_taille(20, taille) + 'px;'+
' box-shadow: 0 0 ' + C2_compteur_taille(10, taille) + 'px red;'+
' border-radius: 50%;'+
'}'+

'/*les bords des chiffres horizontal, angles à 45°*/'+
'/*gauche*/'+
'.C2_compteur_barre_chiffre' + id_unique + '.C2_compteur_barre_chiffre_horizontal' + id_unique + '::before {'+
' content:"";'+
' height: 0;'+
' width: 0;'+
' border-left: none !important;'+
' border: ' + C2_compteur_taille(10, taille) + 'px solid red;'+
' border-top-color: black;'+
' border-bottom-color: black;'+
' position: absolute;'+
' left:0;'+
'}'+

'/*droite*/'+
'.C2_compteur_barre_chiffre' + id_unique + '.C2_compteur_barre_chiffre_horizontal' + id_unique + '::after {'+
' content:"";'+
' height: 0;'+
' width: 0;'+
' border-right: none !important;'+
' border: ' + C2_compteur_taille(10, taille) + 'px solid red;'+
' border-top-color: black;'+
' border-bottom-color: black;'+
' position: absolute;'+
' right:0;'+
'}'+

'/*les bords des chiffres vertical, angles à 45°*/'+
'/*haut*/'+
'.C2_compteur_barre_chiffre' + id_unique + '.C2_compteur_barre_chiffre_vertical' + id_unique + '::before {'+
' content:"";'+
' height: 0;'+
' width: 0;'+
' border-top: none !important;'+
' border: ' + C2_compteur_taille(10, taille) + 'px solid red;'+
' border-left-color: black;'+
' border-right-color: black;'+
' position: absolute;'+
'top: 0;'+
'}'+

'/*bas*/'+
'.C2_compteur_barre_chiffre' + id_unique + '.C2_compteur_barre_chiffre_vertical' + id_unique + '::after {'+
' content:"";'+
' height: 0;'+
' width: 0;'+
' border-bottom: none !important;'+
' border: ' + C2_compteur_taille(10, taille) + 'px solid red;'+
' border-left-color: black;'+
' border-right-color: black;'+
' position: absolute;'+
'bottom: 0;'+
'}'+

'.C2_compteur_barre_chiffre_horizontal' + id_unique + ' {'+
' height: ' + C2_compteur_taille(20, taille) + 'px;'+
' width: calc(' + taille + 'px - ' + C2_compteur_taille(20, taille) + 'px);'+
'}'+

'.C2_compteur_barre_chiffre_vertical' + id_unique + ' {'+
' width: ' + C2_compteur_taille(20, taille) + 'px;'+
' height:calc(' + taille + 'px - ' + C2_compteur_taille(20, taille) + 'px);'+
'}'+

'/*effet de luminosité*/'+
'.C2_compteur_barre_chiffre_horizontal' + id_unique + ' > div {'+
' width: calc(100% - ' + C2_compteur_taille(20, taille) + 'px);'+
' height: 100%;'+
' background-color: transparent;'+
' position: absolute;'+
' box-shadow: 0 0 ' + C2_compteur_taille(10, taille) + 'px red;'+
' left: ' + C2_compteur_taille(10, taille) + 'px;'+
'}'+

'.C2_compteur_barre_chiffre_vertical' + id_unique + ' > div {'+
' width: 100%;'+
' height: calc(100% - ' + C2_compteur_taille(20, taille) + 'px);'+
' background-color: transparent;'+
' position: absolute;'+
' box-shadow: 0 0 ' + C2_compteur_taille(10, taille) + 'px red;'+
' top: ' + C2_compteur_taille(10, taille) + 'px;'+
'}'+

'/*barres*/'+
'.C2_compteur_top' + id_unique + ' {'+
' position: absolute;'+
' top: 0px;'+
' left: ' + C2_compteur_taille(10, taille) + 'px;'+
'}'+

'.C2_compteur_right1' + id_unique + ' {'+
' position: absolute;'+
' top: ' + C2_compteur_taille(20, taille) + 'px;'+
' right: 0;'+
'}'+

'.C2_compteur_right2' + id_unique + ' {'+
' position: absolute;'+
' top: ' + C2_compteur_taille(120, taille) + 'px;'+
' right: 0;'+
'}'+

'.C2_compteur_bottom' + id_unique + ' {'+
' position: absolute;'+
' top: ' + C2_compteur_taille(200, taille) + 'px;'+
' left: ' + C2_compteur_taille(10, taille) + 'px;'+
'}'+

'.C2_compteur_center' + id_unique + ' {'+
' position: absolute;'+
' top: ' + C2_compteur_taille(100, taille) + 'px;'+
' left: ' + C2_compteur_taille(10, taille) + 'px;'+
'}'+

'.C2_compteur_left1' + id_unique + ' {'+
' position: absolute;'+
' top: ' + C2_compteur_taille(20, taille) + 'px;'+
' left: 0;'+
'}'+

'.C2_compteur_left2' + id_unique + ' {'+
' position: absolute;'+
' top: ' + C2_compteur_taille(120, taille) + 'px;'+
' left: 0;'+
'}'+

'/*on écrit charge au démarrage*/'+
'.C2_compteur_chiffre_1_' + id_unique + ' .C2_compteur_right1' + id_unique + ','+
'.C2_compteur_chiffre_1_' + id_unique + ' .C2_compteur_right2' + id_unique + ','+
'.C2_compteur_chiffre_1_' + id_unique + ' .C2_compteur_center' + id_unique + ','+

'.C2_compteur_chiffre_2_' + id_unique + ' .C2_compteur_top' + id_unique + ','+
'.C2_compteur_chiffre_2_' + id_unique + ' .C2_compteur_bottom' + id_unique + ','+

'.C2_compteur_chiffre_3_' + id_unique + ' .C2_compteur_bottom' + id_unique + ','+

'.C2_compteur_chiffre_4_' + id_unique + ' .C2_compteur_top' + id_unique + ','+
'.C2_compteur_chiffre_4_' + id_unique + ' .C2_compteur_right1' + id_unique + ','+
'.C2_compteur_chiffre_4_' + id_unique + ' .C2_compteur_right2' + id_unique + ','+
'.C2_compteur_chiffre_4_' + id_unique + ' .C2_compteur_left1' + id_unique + ','+
'.C2_compteur_chiffre_4_' + id_unique + ' .C2_compteur_bottom' + id_unique + ','+

'.C2_compteur_chiffre_5_' + id_unique + ' .C2_compteur_right1' + id_unique + ','+
'.C2_compteur_chiffre_5_' + id_unique + ' .C2_compteur_center' + id_unique + ','+

'.C2_compteur_chiffre_6_' + id_unique + ' .C2_compteur_right1' + id_unique + ','+
'.C2_compteur_chiffre_6_' + id_unique + ' .C2_compteur_right2' + id_unique + ''+
'{'+
' display:none;'+
'}'+
'</style>';

document.querySelector("head").insertAdjacentHTML("beforeend", css_compteur);


//on crée le contenu de la div compteur
var div_compteur = '';

for(i = 1; i <= 6; i ++){

div_compteur += '<div class="C2_compteur_chiffre' + id_unique + ' C2_compteur_chiffre_' + i + '_' + id_unique + '">'+
'<div class="C2_compteur_barre_chiffre' + id_unique + ' C2_compteur_barre_chiffre_horizontal' + id_unique + ' C2_compteur_top' + id_unique + '"><div></div></div>'+
'<div class="C2_compteur_barre_chiffre' + id_unique + ' C2_compteur_barre_chiffre_vertical' + id_unique + ' C2_compteur_right1' + id_unique + '"><div></div></div>'+
'<div class="C2_compteur_barre_chiffre' + id_unique + ' C2_compteur_barre_chiffre_vertical' + id_unique + ' C2_compteur_right2' + id_unique + '"><div></div></div>'+
'<div class="C2_compteur_barre_chiffre' + id_unique + ' C2_compteur_barre_chiffre_horizontal' + id_unique + ' C2_compteur_bottom' + id_unique + '"><div></div></div>'+
'<div class="C2_compteur_barre_chiffre' + id_unique + ' C2_compteur_barre_chiffre_vertical' + id_unique + ' C2_compteur_left1' + id_unique + '"><div></div></div>'+
'<div class="C2_compteur_barre_chiffre' + id_unique + ' C2_compteur_barre_chiffre_vertical' + id_unique + ' C2_compteur_left2' + id_unique + '"><div></div></div>'+
'<div class="C2_compteur_barre_chiffre' + id_unique + ' C2_compteur_barre_chiffre_horizontal' + id_unique + ' C2_compteur_center' + id_unique + '"><div></div></div>'+
'</div>';

//les deux points séparateurs
if(i == 2 || i == 4)
div_compteur += '<div class="C2_compteur_deux_points' + id_unique + '"><div></div><div></div></div>';

}

document.querySelector("#" + div_id).innerHTML = div_compteur;

//init
var secondes = minutes = heures = 0;

//chaque seconde on met à jour le compteur
var interval_compteur = setInterval(() => {

var plus_moins = '';

var date_actuelle = new Date();

if(type == 'horloge' && utc){

//décorticage de l'UTC envoyé
plus_moins = utc[0];
var gmt = utc.split(plus_moins);
var gmt = gmt[1].split(":");

if(plus_moins == '+')
date_actuelle.setTime(date_actuelle.getTime() + parseInt(gmt[0]) * 60 * 60 * 1000);
else
date_actuelle.setTime(date_actuelle.getTime() - parseInt(gmt[0]) * 60 * 60 * 1000);

}

heures = date_actuelle.getHours();
minutes = date_actuelle.getMinutes();
secondes = date_actuelle.getSeconds();

if(type == 'compte_a_rebours'){

//date fin compte à rebours avec votre UTC (ISO 8601) mettre UTC + ou moins piour correspondre avec votre heure
var date_butoire1 = date + 'T' + heure + utc;

//calcul l'UTC pour connaitre la fin par rapport à la date de fin
var date_butoire = new Date(date_butoire1);

var defaut_time = 0;

if(utc){

//sait si c'est UTC + ou -
var plus_moins = date_butoire1[19];

//split à + ou - pour prendre la date sans UTC
var array_date_butoire = date_butoire1.split(plus_moins);

var date_butoire_sans_utc = new Date(array_date_butoire[0]);

//time de defaut à combler
var defaut_time = date_butoire.getTime() - date_butoire_sans_utc.getTime();
}

//on calcule la différence
var difference = new Date(date_butoire - date_actuelle);

heures = difference.getHours();
minutes = difference.getMinutes();
secondes = difference.getSeconds();

//si c'est la fin, on coupe le setInterval
if(date_actuelle.getTime() - (date_butoire.getTime() - defaut_time) > 0){
clearInterval(interval_compteur);
alert("fin du compte à rebours");
}
}

//on affiche les chiffres
envoyer_creation_chiffre(1, 2, heures, id_unique);
envoyer_creation_chiffre(3, 4, minutes, id_unique);
envoyer_creation_chiffre(5, 6, secondes, id_unique);

}, 1000);
}
function envoyer_creation_chiffre(un, deux, temps, id_unique){

//on affiche les secondes
if(temps < 10){

//on met le 1er chiffre à 0
creer_chiffre(0, `C2_compteur_chiffre_${un}`, id_unique);
creer_chiffre(temps, `C2_compteur_chiffre_${deux}`, id_unique);

}else if(temps > 9){

//on coupe le temps en deux, ex : 12 devient 1 et 2
temps = temps.toString();

var temps1 = temps[0];
var temps2 = temps[1];

creer_chiffre(temps1, `C2_compteur_chiffre_${un}`, id_unique);
creer_chiffre(temps2, `C2_compteur_chiffre_${deux}`, id_unique);

}

}
function creer_chiffre(chiffre, pour, id_unique){
/**
chiffre : le chiffre à créer
pour : à quel endroit du compteur
*/
pour = pour + "_" + id_unique;
chiffre = parseInt(chiffre);

if(chiffre == 1){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_right1" + id_unique + ", .C2_compteur_right2" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_left1" + id_unique + ", .C2_compteur_left2" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "none");

}else if(chiffre == 2){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_right1" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_left2" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_left1" + id_unique + ", .C2_compteur_right2" + id_unique + "", "none");

}else if(chiffre == 3){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_right1" + id_unique + ", .C2_compteur_right2" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_left1" + id_unique + ", .C2_compteur_left2" + id_unique + "", "none");

}else if(chiffre == 4){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_left1" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_right1" + id_unique + ", .C2_compteur_right2" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_left2" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "none");

}else if(chiffre == 5){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_left1" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_right2" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_right1" + id_unique + ", .C2_compteur_left2" + id_unique + "", "none");

}else if(chiffre == 6){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_left1" + id_unique + ", .C2_compteur_left2" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_right2" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_right1" + id_unique + "", "none");

}else if(chiffre == 7){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_right1" + id_unique + ", .C2_compteur_right2" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_left1" + id_unique + ", .C2_compteur_left2" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "none");

}else if(chiffre == 8){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_right1" + id_unique + ", .C2_compteur_right2" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_left1" + id_unique + ", .C2_compteur_left2" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "block");

}else if(chiffre == 9){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_right1" + id_unique + ", .C2_compteur_right2" + id_unique + ", .C2_compteur_center" + id_unique + ", .C2_compteur_left1" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_left2" + id_unique + "", "none");

}else if(chiffre == 0){

//on montre les barres qui servent
display_barres(pour, ".C2_compteur_top" + id_unique + ", .C2_compteur_right1" + id_unique + ", .C2_compteur_right2" + id_unique + ", .C2_compteur_left1" + id_unique + ", .C2_compteur_left2" + id_unique + ", .C2_compteur_bottom" + id_unique + "", "block");

//on cache les barres qui servent pas
display_barres(pour, ".C2_compteur_center" + id_unique + "", "none");
}
}
function display_barres(pour, classes, display){
document.querySelector(`.${pour}`).querySelectorAll(classes).forEach(el => el.style.display = display);

}
function C2_compteur_taille(base, taille){
return base / 100 * taille;
}



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