Steve TENZA
Intervient pour votre site internet
<!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;
}
J'espère que ce script gratuit vous est utile.Pour soutenir mon travail, un simple don ou mettre une note est grandement apprécié.
Vous cherchez à pousser encore plus loin vos idées ou à les concrétiser avec un site internet sur mesure ? Je suis là pour vous aider ! Mon expérience en développement web est à votre disposition.
Que ce soit la création de votre site web pro ou l'apport de fonctionnalités avancées à votre projet, contactez-moi pour en discuter et avoir un devis gratuit personnalisé.
Mon objectif est de vous offrir des solutions sur mesure qui répondent à vos besoins, et votre vision associée à mon expertise donnera vie à votre projet web parfait. Contactez-moi aujourd'hui, je réponds en général en moins d'une heure :
Demander un devis