Compteur hebdomadaire

[photoclic]

Bonjour à tous,

Un problème de code soumis ici et qui concerne un compteur qui décompte les jours, heures, minutes durant 1 semaine du mardi au lundi minuit.

Je l'utilise actuellement en renseignant la date toutes les semaines avec ce code:

Code:


$(function(){
          if(!_userdata["session_logged_in"])return;
          
            var Affiche= document.getElementById("Compte");
            function Rebour() {  
            var date1 = new Date();  

//A renseigner tous les mardis            
        var date2 = new Date ("jan 18 00:00:00 2022");
                                                                    
             //Si temps terminé  
              if (date1 > date2) {
              Affiche.innerHTML ="<div class= titre style=background:#922a36;height:34px;font-weight:bold;padding-left:8px;padding-right:8px;overflow:hidden;>Semaine écoulée.</div>";                                  
              return;              
              }
              
            var sec = (date2 - date1) / 1000;
            var n = 24 * 3600;
            if (sec > 0) {
            j = Math.floor (sec / n);          
            h = Math.floor ((sec - (j * n)) / 3600);
            mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
           sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
            Affiche.innerHTML = "<div class=titre>Temps restant pour voter: </div><div class=nume><span>"+ j +"</span></div> <div class=alpha>j</div><div class=nume><span>"+ h +"</span></div> <div class=alpha>h</div><div class=nume><span> "+ mn +" </span></div><div class=alpha>mn</div>";
            window.status = "Temps restant : " + j +"j "+ h +"h "+ mn +"min ";
          //console.log('Il y a '+h+'H '+mn+'min '+sec+'sec');
            }
                        
            setTimeout(function(){Rebour(); }, 1000);                      
            }            
            Rebour();

            });

Le css associé est dans le template index-body:

Code:


<div id="Compte"></div>
        <style>
        /*Compte à rebours 2*/
        #Compte {height: 30px;width: 30%;padding: 10px;top: 200px;position:absolute;z-index: 10;}
        #Compte div{float:left;margin:0px 5px;line-height: 30px;color:#3bd9eb;}
        #Compte div span{font-size:12px;text-align:center;color:#e2660a;}
        </style>

Serait-il possible de modifier le code pour que le changement de date se fasse automatiquement?

J'ai essayé avec le code ci-dessous, mais cela ne fonctionne pas correctement car la date n'est correcte que le jour défini dans la variable jourSemaine, les jours suivant la date est perdue.

Code:



$(function(){
          if(!_userdata["session_logged_in"])return;
          
            var Affiche= document.getElementById("Compte");
            function Rebour() {  
            var date1 = new Date();  
          var jourSemaine = date1.getDay();
                                
        function addDays(dateObj, numDays) {
   dateObj.setDate(dateObj.getDate() + numDays);
   return dateObj;
}


 //Test jour semaine est lundi            
          if (jourSemaine === 1){            
          var nextWeek = addDays(new Date(), 7);          
          nextWeek.setHours(0);  
          nextWeek.setMinutes(0);
          nextWeek.setSeconds(0);  
           }
         var date2 = nextWeek;
          
            
console.log(
    'Today date 1: ' + date1 +
    '\nNext week: ' + nextWeek +
    '\ndate2: ' + date2 +
    '\nJour: ' +jourSemaine
);
 
                          
             //Si temps terminé  
              if (date1 > date2) {
              Affiche.innerHTML ="<div class= titre style=background:#922a36;height:34px;font-weight:bold;padding-left:8px;padding-right:8px;overflow:hidden;>Semaine écoulée.</div>";                                  
              return;              
              }
              
            var sec = (date2 - date1) / 1000;
            var n = 24 * 3600;
            if (sec > 0) {
            j = Math.floor (sec / n);          
            h = Math.floor ((sec - (j * n)) / 3600);
            mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
           sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
            Affiche.innerHTML = "<div class=titre>Temps restant pour voter: </div><div class=nume><span>"+ j +"</span></div> <div class=alpha>j</div><div class=nume><span>"+ h +"</span></div> <div class=alpha>h</div><div class=nume><span> "+ mn +" </span></div><div class=alpha>mn</div>";
            window.status = "Temps restant : " + j +"j "+ h +"h "+ mn +"min ";
          //console.log('Il y a '+h+'H '+mn+'min '+sec+'sec');
            }
                        
            setTimeout(function(){Rebour(); }, 1000);                      
            }            
            Rebour();

            });

Merci pour votre aide.

[Toryudo]

Bonjour !
Allez, c'est parti pour un peu de magie.

Pensez à une journée de la semaine.
Convertissez ce jour de la semaine en chiffre (lundi = 1, mardi = 2, ..., dimanche = 7).
Faites 9 moins ce chiffre.
Si votre résultat est supérieur ou égal à 7, retranchez 7 à ce chiffre.
Si votre résultat est maintenant égal à 0, ajouter 7.
Et vous obtenez... le nombre de jour qui vous sépare de mardi prochain !

Voilà le code du calcul :

Code:

      // Calcul du mardi suivant
      var date2 = new Date();
      date2.setHours(0);
      date2.setMinutes(0);
      date2.setSeconds(0);

      var prochainMardi = (7 + 2 - date2.getDay()) % 7;
      if (prochainMardi == 0){
         prochainMardi = 7;
      }
      date2.setDate(date2.getDate() + prochainMardi);

Et voici le code complet corrigé :

Code:

$(function() {
   if ( ! _userdata["session_logged_in"]) return;

    var Affiche = document.getElementById("Compte");

    function Rebour() {
        var date1 = new Date();

        // Calcul du mardi suivant
        var date2 = new Date();
        date2.setHours(0);
        date2.setMinutes(0);
        date2.setSeconds(0);

        var prochainMardi = (7 + 2 - date2.getDay()) % 7;
        if (prochainMardi == 0){
           prochainMardi = 7;
        }
        date2.setDate(date2.getDate() + prochainMardi);

        //Si temps terminé 
        if (date1 > date2) {
            Affiche.innerHTML = "<div class= titre style=background:#922a36;height:34px;font-weight:bold;padding-left:8px;padding-right:8px;overflow:hidden;>Semaine écoulée.</div>";
            return;
        }

        var sec = (date2 - date1) / 1000;
        var n = 24 * 3600;
        if (sec > 0) {
            j = Math.floor(sec / n);
            h = Math.floor((sec - (j * n)) / 3600);
            mn = Math.floor((sec - ((j * n + h * 3600))) / 60);
            sec = Math.floor(sec - ((j * n + h * 3600 + mn * 60)));
            Affiche.innerHTML = "<div class=titre>Temps restant pour voter: </div><div class=nume><span>" + j + "</span></div> <div class=alpha>j</div><div class=nume><span>" + h + "</span></div> <div class=alpha>h</div><div class=nume><span> " + mn + " </span></div><div class=alpha>mn</div>";
            window.status = "Temps restant : " + j + "j " + h + "h " + mn + "min ";
        }

        setTimeout(function() {
            Rebour();
        }, 1000);
    }
    Rebour();

});

Entre nous, la partie if (date1 > date2) { ne sera plus jamais vraie, vous pouvez sans doute l'enlever au passage !

[photoclic]

Bonjour Toryudo,

Oh, un grand merci et bravo pour ton code et ses explications.
Je n'y serais jamais arrivé!

C'est tout bon.

Concernant  la partie if (date1 > date2), c'était pour afficher un message le temps que j'actualise manuellement la date du mardi suivant.
Faudrait que je remplace cette ligne pour que le message s'affiche toute la journée du mardi en remplaçant le texte par "Nouvelle semaine" par exemple.

Si cela ne dérange pas, je vais laisser le sujet ouvert encore 1 jour ou 2 le temps de faire quelques tests.