11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Timer count up non réinitialisé au reload

Bonjour,

Je cherche à mettre en place un timer tout simple qui s'incrémente et ne se réinitialise pas à la fermeture de la page.

J'ai récupéré le code suivant qui marche parfaitement, par contre comment insérer un bouton de pause et de lecture ? Cela dépasse mes compétences Smiley smile

Merci !


<head>
<script type="text/javascript">
var countDownDate = localStorage.getItem('startDate');
if (countDownDate) {
    countDownDate = new Date(countDownDate);
} else {
    countDownDate = new Date();
    localStorage.setItem('startDate', countDownDate);
}
var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = now - countDownDate.getTime();
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("time").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
</script>
</head>
<body>
<div id="time"></div>
</body>
Salut....

Donc si je comprend bien, tu as récupérer du code copier coller, que tu ne comprend pas donc.. et tu veux qu'on te fasse du code copier coller que tu ne comprendrais pas non plus du coup.. en faite, il ne faut pas coder quand on à pas envie et j'ai vraiment l'impression que n'a pas envie lol

Je passe Smiley smile
Modifié par JENCAL (18 Apr 2018 - 10:07)
JENCAL a écrit :
Salut....
Donc si je comprend bien, tu as récupérer du code copier coller, que tu ne comprend pas donc.. et tu veux qu'on te fasse du code copier coller que tu ne comprendrais pas non plus du coup.. en faite, il ne faut pas coder quand on à pas envie et j'ai vraiment l'impression que n'a pas envie lol Je passe Smiley smile


Je n'ai pas dit que je ne comprenais pas le code récupéré, je le comprends dans l'ensemble, et d'ailleurs je l'ai marginalement adapté.

J'imagine qu'il faut que j'utilise un cleartimeout et settimeout pour la pause et la reprise de la lecture, et c'est ça que j'ai du mal à intégrer dans le contexte du code ci-dessus. Autant je maîtrise correctement le PHP, autant le javascript est encore difficile pour moi.
Modifié par cyberlp23 (18 Apr 2018 - 10:15)
Ok, je me suis peut être emballé alors..

Mais ton "J'ai récupéré le code suivant" m'a surpris et je pensé que tu ne l'avais même pas lu.

en faite les fonction pause et replay, reset/resume il faut que tu les codes à l'intérieur de ta fonction
exemple d'un timer : 

function Timer(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    this.resume = function() {
        start = new Date();
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
    };

    this.resume();
}


et ensuite pour l'instanciation et tout ce qui de la pause : 

var timer = new Timer(function() {
    alert("Ok");
}, 1000);

timer.pause();
timer.resume();

Modifié par JENCAL (18 Apr 2018 - 10:24)
aliasdmc a écrit :
Bonjour cyberlp23,
Je t'ai fait un petit exemple rapide :
https://codepen.io/Zonecss/pen/ZoERXy

Génial, merci !
Par contre j'essaie de comprendre la logique du debug. Si j'ai bien compris, je peux supprimer les lignes : 
  //Debuger
  var fctDebuger = function(sId, sValue) {
    document.getElementById(sId).innerHTML = sValue;
  }//fct
    fctDebuger("debugnow", "Now  ="+ new Date().toString());
  fctDebuger("debugcountDownDate", "countDownDate = "+countDownDate.toString());


Par ailleurs, si je veux ne pas afficher les jours, suffit-il que je fasse :
 document.getElementById("time").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

ça a l'air de fonctionner, mais comme tu précises que "le calcul des s, m, h est faux si tu ne mets pas les jours", je préfère m'en assurer Smiley smile
Modifié par cyberlp23 (18 Apr 2018 - 22:02)
J'ai ajouté un bouton pour réinitialiser.
this.reset = function(){
	document.getElementById("time").innerHTML =  00 + "h " + 00 + "m " + 00 + "s ";
	localStorage.removeItem('startDate');
  }

<button onclick="oTimer.reset();window.location.reload()" > reset</button>

qui fonctionne, sauf que je suis obligé de reloader la page pour qu'il réinitialise vraiment, et ma méthode est sans doute un peu dégueu Smiley smile
Bonjour cyberlp23,

J'ai ajouter le reset dans le codepen

Oui, tu peux supprimer c'est juste pour afficher les dates pour deburger
//Debuger
  var fctDebuger = function(sId, sValue) {
    document.getElementById(sId).innerHTML = sValue;
  }//fct
fctDebuger("debugnow", "Now  ="+ new Date().toString());
fctDebuger("debugcountDownDate", "countDownDate = "+countDownDate.toString());

et 
 countDownDate.setMonth(2);

Qui décale met le mois de mars

cite : "Par ailleurs, si je veux ne pas afficher les jours, suffit-il que je fasse :"
oui mais du coups tu ne tiens pas compte du nombre d'heures des jours que tu exclus
aliasdmc a écrit :

cite : "Par ailleurs, si je veux ne pas afficher les jours, suffit-il que je fasse :"
oui mais du coups tu ne tiens pas compte du nombre d'heures des jours que tu exclus

Ok mais si je veux partir de 00h00mn00s du coup?
cyberlp23 a écrit :

Ok mais si je veux partir de 00h00mn00s du coup?

En bien il faut que tu multiplies la variable days par 24 (heure) et que tu l'ajoutes à la variable hours
Modifié par aliasdmc (19 Apr 2018 - 19:49)
Sujet clos
Aller à