Démarrer un timer au click d'un bouton

**Nicolas Legrand** · 07/01/2020, 13h20

Bonjour à vous,

Je suis actuellement entrain d'essayer de trouver un moyen de déclencher mon timer
au click d'un bouton mais je sèche sur la façon de faire si quelqu'un peut m'apporter une piste merci d'avance.
Le timer s'affiche directement au chargement de la page.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!DOCTYPE html>
<html>
 
		<head>
			<meta charset="UTF-8">
			<link rel="stylesheet" href="style.css">
 
 
      <title> timer </title>
		</head>
 
        <body>
 
 
        <button id="start_timer" type="button">start</button> 
       <span id="countdown"></span> 
 
 
                         <script src="timer.js"></script> 
        </body>
 
</html>

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
var seconds = 1200;
var buttonStart = document.getElementById("start_timer");
//var timer = null;
 
function secondPassed(){
    var minutes = Math.round((seconds - 30) / 60); //  (1200 - 30) / 60) = 19.5  //math round permet d'arrondir à 20 
    var remainingSeconds = seconds % 60;   // 500 modulo 60  = 20
 
    if(remainingSeconds < 10) { 
    remainingSeconds = "0" + remainingSeconds; // on ajoute un 0 en chaine de caractère , en fait c'est une question de format     10 min 5 sec => 10 min 05 sec
    }
 
    document.getElementById("countdown").innerHTML =   + minutes + " minutes" + ":" +remainingSeconds + " secondes";
 
    if(seconds == 0) { // si var seconds = 0 alors le minuteur est terminé et affiche un message.
    clearInterval(countdownTimer); // Permet d'annuler une action répétée minutée initiée via un appel à setInterval().
    document.getElementById("countdown").innerHTML = "fin du compte à rebours"; // si les secondes sont = 0 alors affiche "fin du compte à rebours"
    }else{
        seconds --; // si les secondes ne sont pas à zéro alors on décremente.
    }
}
 
var countdownTimer = setInterval('secondPassed()',1000); // / l'interval du décompte est de 1000 millisecondes soit 1 seconde.
 
//si on click sur le bouton le start le timer ce lance 
//si on click pas le bouton start il ne se lance pas
 
buttonStart.addEventListener("click",function(){
var buttonStart = document.getElementById("start_timer");
if(){
 
}
else{
 
}
 
 
});

**javatwister** · 07/01/2020, 13h31

Bonjour,

Ta ligne 25 lance le timer... car ta variable est globale: elle est interprétée dès le chargement de la page.
(C'était un indice.)

**Nicolas Legrand** · 07/01/2020, 14h09

Bonjour,
Merci pour l'indice je vais continuer à chercher je reviens vers vous dès que j'ai trouvé
une solution à mon problème ou pas ^^. Bonne journée.

**Nicolas Legrand** · 07/01/2020, 14h22

Je crois bien que je viens de trouver la solution à mon problème,
qu'en pensez vous ? merci d'avance ^^.
En gros j'ai juste créé une fonction startTimer qui exécute ma variable countdownTimer
au click du bouton.

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
var seconds = 1200;
var buttonStart = document.getElementById("start_timer");
 
 
function secondPassed(){
    var minutes = Math.round((seconds - 30) / 60); //  (1200 - 30) / 60) = 19.5  //math round permet d'arrondir à 20 
    var remainingSeconds = seconds % 60;   // 500 modulo 60  = 20
 
    if(remainingSeconds < 10) {  // 05 min : 56 sec si les secondes son inférieur à 10 
    remainingSeconds = "0" + remainingSeconds; // on ajoute un 0 en chaine de caratère , en fait c'est une question de format     10 min 5 sec => 10 min 05 sec
    }
 
    document.getElementById("countdown").innerHTML =   + minutes + " minutes" + ":" +remainingSeconds + " secondes";
 
    if(seconds == 0) { // si var seconds = 0 alors le minuteur est terminé et affiche un message.
    clearInterval(countdownTimer); // Permet d'annuler une action répétée minutée initiée via un appel à setInterval().
    document.getElementById("countdown").innerHTML = "fin du compte à rebours"; // si les secondes sont = 0 alors affiche "fin du compte à rebours"
    }else{
        seconds --; // si les secondes ne sont pas à zéro alors on décremente.
    }
}
 
function startTimer(){
var countdownTimer = setInterval('secondPassed()',1000); // / l'interval du décompte est de 1000 millisecondes soit 1 seconde. fonction qui lane le timer
}
 
 
buttonStart.addEventListener("click",function(){
startTimer()
});

**javatwister** · 07/01/2020, 14h46

Alors, remplace ta ligne 16 par if(seconds == 1195) et observe la console;

**javatwister** · 07/01/2020, 14h59

une autre approche;

Je n'ai rien vérifié du système de calcul qui a l'air de marcher;
J'élimine seulement les variables globales.
Par ailleurs, par défaut, je considère que dans une session, on clique une seule fois sur le bouton, les autres clics n'étant pas pris en compte; si on veut recommencer, on actualise ({once:true}, ligne 20); mais je ne sais pas quels sont tes besoins;est-il possible de mettre en pause le compte à rebours et de le relancer? Ou de le relancer au début quand le temps est écoulé?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
document.getElementById("start_timer").addEventListener("click",function(){
	let seconds = 1200;
	const countdownTimer = setInterval(
		function(){
			const minutes = Math.round((seconds - 30) / 60); //  (1200 - 30) / 60) = 19.5  //math round permet d'arrondir à 20 
			let remainingSeconds = seconds % 60;   // 500 modulo 60  = 20
			if(remainingSeconds < 10) { 
				remainingSeconds = "0" + remainingSeconds; // on ajoute un 0 en chaine de caractère , en fait c'est une question de format     10 min 5 sec => 10 min 05 sec
			}
			document.getElementById("countdown").innerHTML =   + minutes + " minutes" + ":" +remainingSeconds + " secondes";
 // teste 'seconds' avec une valeur de 1195 par exemple, pour vérifier le système.
			if(seconds == 0) { // si var seconds = 0 alors le minuteur est terminé et affiche un message.
				clearInterval(countdownTimer); // Permet d'annuler une action répétée minutée initiée via un appel à setInterval().
				document.getElementById("countdown").innerHTML = "fin du compte à rebours"; // si les secondes sont = 0 alors affiche "fin du compte à rebours"
			}
			else{
				seconds --; // si les secondes ne sont pas à zéro alors on décremente.
			}
	},1000); // / l'interval du décompte est de 1000 millisecondes soit 1 seconde.
},{once:true});

**Nicolas Legrand** · 07/01/2020, 15h22

Oui effectivement countdownTimer is not defined et
donc le message fin du compte à rebours ne s'affiche pas.

Du coup oui je viens de changer clearInterval(countdownTimer); par clearInterval(startTimer());
Ce qui me paraît logique quand j'y repense ^^ .
Le message s'affiche bien est tout fonctionne correctement chez moi et pas d'erreur dans la console d'indiquer.
Merci beaucoup !!!!!

Ce qui me donne le résultat suivant :

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
var seconds = 1200;
var buttonStart = document.getElementById("start_timer");
//var timer = null;
 
function secondPassed(){
    var minutes = Math.round((seconds - 30) / 60); //  (1200 - 30) / 60) = 19.5  //math round permet d'arrondir à 20 
    var remainingSeconds = seconds % 60;   // 500 modulo 60  = 20
 
    if(remainingSeconds < 10) {  // 05 min : 56 sec si les secondes son inférieur à 10 
    remainingSeconds = "0" + remainingSeconds; // on ajoute un 0 en chaine de caratère , en fait c'est une question de format     10 min 5 sec => 10 min 05 sec
    }
 
    document.getElementById("countdown").innerHTML =   + minutes + " minutes" + ":" +remainingSeconds + " secondes";
 
 
 
    if(seconds == 0) { // si var seconds = 0 alors le minuteur est terminé et affiche un message.
    clearInterval(startTimer()); // Permet d'annuler une action répétée minutée initiée via un appel à setInterval().
 
    document.getElementById("countdown").innerHTML = "fin du compte à rebours"; // si les secondes sont = 0 alors affiche "fin du compte à rebours"
    }else{
        seconds --; // si les secondes ne sont pas à zéro alors on décremente.
    }
}
 
 
// pour démarrer
function startTimer(){
var countdownTimer = setInterval('secondPassed()',1000); // / l'interval du décompte est de 1000 millisecondes soit 1 seconde. fonction qui lane le timer
 
}
 
 
buttonStart.addEventListener("click",function(){
startTimer()
});

**javatwister** · 07/01/2020, 15h40

Oulah! Tu as de la chance de ne pas avoir d'alerte! Tu utilises clearTimeout avec comme paramètre une fonction alors qu'on attend l'identifiant du timer;

Par ailleurs, le programme bugue si tu recliques sur le bouton; ... et tu as toujours tes variables globales.

**Nicolas Legrand** · 07/01/2020, 15h58

Merci beaucoup, j'ai sauté un message sans faire exprès. En gros je cherche à faire un compte à rebours en validant un formulaire qui à la fin
du temps donné (20 minutes) indiquera le message suivant à l'utilisateur "votre réservation a expiré" . C'est un exercice que je fais dans le but
d'apprendre et comprendre la gestion du temps. (je suis débutant). Grâce à vos remarques je m'aperçoit qu'il faut vraiment
que je me penche sur la portée des variables aussi. En tout cas merci beaucoup pour votre temps et votre patience vous m'avez déjà
apporté beaucoup !
Bonne fin de journée à vous ! ^^

Invité · 07/01/2020, 16h13

Bonjour,

une solution/variante (réponse à une autre discussion) : https://codepen.io/jreaux62/pen/OwgYaz

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<button type="button" id="start_timer">start countdown</button>
<div id="count_down_div"></div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
"use strict";
// ------------
function launch_count_down()
{
  // le délai
  let reload_delay = 30 * 60 * 1000; // toutes les 30 minutes
  setTimeout("document.location.href='Essai.php?bascule=0'", reload_delay);
 
  // Compte à rebours
  let count_down_div = document.getElementById("count_down_div");
  let count_down_delay = 1000 * 1; // toutes les 1 secondes
  let count_down = 0;
  count_down_div.textContent = heures_minutes_secondes( (reload_delay - count_down)/1000 );
  window.setInterval(function() {
    count_down += count_down_delay;
    count_down_div.textContent = heures_minutes_secondes( (reload_delay - count_down)/1000 );
    if (count_down >= reload_delay) { count_down = 0; }
  }, count_down_delay);
}
// ------------
function heures_minutes_secondes( secondes )
{
    let temps = new Date();
    temps.setTime(secondes*1000);
  if( secondes > 60 * 60) // supérieur à 1 heure
  {
    return (temps.getHours()-1)+":"+temps.getMinutes()+":"+temps.getSeconds();
  } else {
    return temps.getMinutes()+":"+temps.getSeconds();
  }
}
// ------------
// Déclenchement au chargment de page
/*
document.addEventListener('DOMContentLoaded', function(event) {
  launch_count_down();
});
*/
// ------------
// Déclenchement au click sur bouton
document.getElementById("start_timer").addEventListener('click', function() {
  launch_count_down();
  this.style.display = 'none'; // on masque le bouton
});

Démarrer un timer au click d'un bouton

JavaScript

Discussions similaires

Partager

Partager