Une minuterie qui ne se remet pas à zéro lors de l'actualisation.

Question

EDIT : Comment pourrais-je passer un paramètre lorsque j'appelle Clock.start() afin de pouvoir changer la valeur de totalSeconds ?

J'ai un compteur dont je concatène la valeur avec l'ID de l'affichage du timer car il y aurait plusieurs lignes de timers sur la page mais un seul fonctionnerait pour chaque utilisateur. Je veux passer la valeur de la minuterie pour savoir sur quelle ligne se trouve la minuterie que je dois récupérer, puis je la convertis en secondes et enfin je peux affecter cette valeur à totalSeconds. Alors peut-être que je pourrai faire fonctionner tout cela de la manière dont je l'ai imaginé.

CE QUE J'AI DÉJÀ EN COURS : J'ai un minuteur qui ne montre pas qu'il est en train de décompter, sauf si je rafraîchis. Lorsque la page se charge, PHP interroge la base de données mySQL et calcule le temps écoulé avec TIMEDIFF(now(), time_log), où time_log est la date de démarrage du minuteur.

CE QUE J'AIMERAIS AJOUTER : Ce que je veux faire, c'est utiliser le snippet js/jquery ci-dessous pour obtenir mon TIMEDIFF et ensuite l'utiliser comme totalSeconds, de sorte que totalSeconds ne se réinitialise pas et continue à compter à partir de la valeur TIMEDIFF.

var Clock = 
{
    totalSeconds: 0,

    start: function () {
        var self = this;

        this.interval = setInterval(function () {
          self.totalSeconds += 1;

          var ctr;
          $(".icon-play").each(function(){
              if( $(this).parent().hasClass('hide') )
                  ctr = ($(this).attr('id')).split('_');
          });

          $("#hour_" + ctr[1]).text(pad(Math.floor(self.totalSeconds/3600)));
          $("#min_" + ctr[1]).text(pad( Math.floor((self.totalSeconds/60)%60) ));
          $("#sec_" + ctr[1]).text(pad(parseInt(self.totalSeconds%60)));
        }, 1000);
    },

    pause: function () {
      clearInterval(this.interval);
      delete this.interval;
    },

    resume: function () {
      if (this.interval) this.start();
    }
};

Pour ce script, les crédits à M. Speransky Danil. comment mettre en pause et reprendre un minuteur ?

Answer 1

Au lieu d'enregistrer le total des secondes, vous devriez plutôt enregistrer l'heure de départ et calculer le nombre de secondes entre maintenant et le moment où vous avez démarré le chronomètre.

De plus, vous stockez déjà votre heure de début dans la base de données, vous pourriez donc l'initialiser à partir de celle-ci lors du chargement de la page.

Si vous vous contentez de compter les secondes, vous perdrez du temps entre les rafraîchissements de la page.

EDIT : Vous pouvez utiliser Clock.totalSeconds dans votre sortie HTML générée par PHP. J'ai cru comprendre que vous avez déjà fait fonctionner cette horloge JS (avec un balisage qui n'a pas été posté ci-dessus).

<script type="text/javascript">
var Clock = {}; // your code above
Clock.totalSeconds = <?php echo (int)$seconds; ?>;
</script>

Answer 2

SI vous pouvez cibler les navigateurs modernes, sauvegardez le fichier totalSeconds en localStorage .
Vous pouvez lire totalSeconds à l'arrière de localStorage

Si vous devez cibler des navigateurs plus anciens, l'utilisation de cookies pour enregistrer la valeur est votre meilleure chance. Je fixerais la date du cookie pour qu'il expire assez vite.