1. Acceuil
  2. Cours
  3. Cours JavaScript
  4. Faire un Chrono JS - FrameWorkLess

Faire un bon chrono

Chrono basique

Pour créer un chrono basique, nous allons créer une progress bar qui se remplira seconde aprés seconde

  • <div class="timer">
    • <span></span>
  • </div>

A présent un peu de CSS

  • .timer{
    • width:250px;
    • height:75px;
    • border:1px solid #000
  • }
  • .timer span{
    • display:block;
    • background:#339;
  • }

L'idée est trés simple, toutes les secondes, nous allons modifier la propriété css width en pourcentage du span. Par exemple, si on met un chrono à 60 secondes arrivé à 30 seconde la valeur width sera de 50%

  • function InitTimer(){
    • //1 on récupère la progressBar
    • const progressBarItem = document.querySelector(".timer span");
    • //On va mettre un chrono à 60 secondes
    • let during = 60;
    • const totalTime = during;//On stocke la durée de base
    • //A présent on va créer la fonction countDown
    • function countdown() {
      • if(during>0){
        • // Calculons la propriété width
        • const progress = ((totalTime - remainingTime) / totalTime) * 100;
        • //On met à jour la propriété
        • progressBarEl.style.width=progress+"%"
        • //On décrémente la durée
        • during--;
        • timer_counter = setTimeout(countdown, 1000);
      • }else{
        • clearTimeout(timer_counter);
      • }
    • }
  • }
  • InitTimer();

Et voila un jolie chronométre basique

Un peu d'évolution

Une progressBar horizontale c'est beau mais trop basique. Créeons une progress bar circulaire.

Pour ce faire nous allons faire la mise à jour du CSS en ajouter une propriété background conic-gradient

  • .timer{
  • width:100px;
  • height:90px;
  • border:10px solid transparent;
  • border-radius:50%;
  • background:linear-gradient(#3336, #1116) content-box no-repeat,conic-gradient(#2A36EE 0%, 0, #6663 ) border-box;
  • }

Il faut aussi mettre à jour la pseudo classe:after

  • .timer::after{
  • display: block;
  • width: 50px;
  • height: 50px;
  • border:1px solid #F00;
  • }

On va faire simple, au lieu de modifier la propriété CSS width on va modifier le pourcentage associé au conic-gradient propriété background

  • function InitTimer(){
    • //1 on récupère la progressBar
    • const progressBarItem = document.querySelector(".timer span");
    • //On va mettre un chrono à 60 secondes
    • let during = 60;
    • const totalTime = during;//On stocke la durée de base
    • //A présent on va créer la fonction countDown
    • function countdown() {
      • if(during>0){
        • // Calculons la propriété width
        • const progress = ((totalTime - remainingTime) / totalTime) * 100;
        • //On met à jour la propriété
        • progressBarEl.style..background = `linear-gradient(#333, #111) content-box no-repeat,conic-gradient(#2A36EE ${progress}%, 0, #666 ) border-box`;
        • //On décrémente la durée
        • during--;
        • timer_counter = setTimeout(countdown, 1000);
      • }else{
        • clearTimeout(timer_counter);
      • }
    • }
  • }
  • InitTimer();

Et Voila

Partager