Discussion :

[homeland21]

Bonjour,
je voudrais sauvegarder mon compte a rebours de 20 minutes avec sessionStorage , le problème c'est que je le sauvegarde mais il est en seconde et il est figé.
voici mon objet chrono:

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
var chrono = {
        seconds: 1200, 
        minutes: "", 
        secondPassed: function () {
            var remainingSeconds = this.seconds % 60;
            this.minutes = Math.round((this.seconds - 30) / 60)
            if (remainingSeconds < 10) {
                remainingSeconds = "0" + remainingSeconds;
            }
            document.getElementById('countdown').innerHTML = this.minutes + " minutes et " + remainingSeconds + " secondes.";
            if (chrono.seconds == 0) {
                clearInterval(countdownTimer);
                document.getElementById('countdown').innerHTML = "Votre réservation est annulée.";
            }
            else {
                this.seconds--;
            }
        }
 
    }

Et voici comment je sauvegarde et apelle mon chrono:

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
document.getElementById('confirm').addEventListener("click", function () {
    document.getElementById("recap").innerHTML = '1 vélo reserver à la station ' + document.getElementById("station").innerHTML + ' pour ';
    var rebour = Object.create(chrono);
    var chrono1 = setInterval('chrono.secondPassed()', 1000);
    document.getElementById("cadre").style.display = "none";
    document.getElementById('button01').style.display = "none";
    document.getElementById('merci').innerHTML = "Merci!"
    var station = document.getElementById("station").innerHTML;
    var station = document.getElementById("recap").innerHTML;
    sessionStorage.setItem('key', station);
    sessionStorage.setItem('key1', Number(chrono1));
});
var key = sessionStorage.getItem('key')
var key1 = sessionStorage.getItem('key1')
document.getElementById("recap").innerHTML = key;
document.getElementById("countdown").innerHTML = Number(key1);

si vous pouviez m'aider , merci beaucoup.

[homeland21]

Salut j'ai avancé un peu .
Lors de la réservation j'ai mon Event qui lance le compte compte a rebours, il enregistre en session storage la date de la reservation.

lors de l'initialisation de la page je récupère la date a l'instant "t" , je soustrait les deux dates avec ma fonction.

Ma fonction me permets de recupérer la difference en heure,minutes et seconde.

Mais voila ou je galere comment apres soustraire le resultat a mes 20 minutes de reservation?

Voila ma fonction qui calcule la difference entre les deux dates et les essais que j'ai fait:

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function dateDiff(date1, date2){
	var diff = {}							// Initialisation du retour
	var tmp = date2 - date1;
 
	tmp = Math.floor(tmp/1000);             // Nombre de secondes entre les 2 dates
	diff.sec = tmp % 60;					// Extraction du nombre de secondes
 
	tmp = Math.floor((tmp-diff.sec)/60);	// Nombre de minutes (partie entière)
	diff.min = tmp % 60;					// Extraction du nombre de minutes
 
	tmp = Math.floor((tmp-diff.min)/60);	// Nombre d'heures (entières)
	diff.hour = tmp % 24;					// Extraction du nombre d'heures
 
	tmp = Math.floor((tmp-diff.hour)/24);	// Nombre de jours restants
	diff.day = tmp;
 
	return diff;
 
 
 
}
 
var key = sessionStorage.getItem('key');
var key1 = sessionStorage.getItem('key1')
document.getElementById("recap").innerHTML = key;
 
var date = new Date();
var derniereDate = new Date(key1);
console.log(date);
console.log(derniereDate);
 
date1 = new Date();
date2 = new Date(key1);
diff = dateDiff(date2, date1);
console.log(diff);
var newTmp = 20-diff.min;
console.log(newTmp);

[melka one]

jour

le mieux serait de tous convertir en milliseconde pour le calcul

[homeland21]

Oui merci cela m'a bien aidé, car maintenant je peux utiliser mon objet chrono pour le décrémenter.
Du coup j'ai modifié mon objet chrono mais j'ai quelques soucis.

Voici mon objet chrono:

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
21
22
23
var chrono = {
        seconds: 1200, 
        minutes: "", 
 
 
        secondPassed: function () {
            var remainingSeconds = this.seconds % 60;
            this.minutes = Math.round((this.seconds - 30) / 60)
            if (remainingSeconds < 10) {
                remainingSeconds = "0" + remainingSeconds;
            }
            document.getElementById('countdown').innerHTML = this.minutes + " minutes et " + remainingSeconds + " secondes.";
            if (chrono.seconds == 0) {
                clearInterval(countdownTimer);
                document.getElementById('countdown').innerHTML = "Votre réservation est annulée.";
            }
            else {
                this.seconds--;
            }
        }
 
    }
 var chrono =nsetInterval('chrono.secondPassed()', 1000)

et la mon objet modifié mais qui ne fonctionne pas ,le chrono n'est pas décrémenter:

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
21
var chrono = {
        seconds: ""
        , minutes: ""
        , secondPassed: function () {
            chrono.seconds = 1200;
            var remainingSeconds = chrono.seconds % 60;
            this.minutes = Math.round((chrono.seconds - 30) / 60)
            if (remainingSeconds < 10) {
                remainingSeconds = "0" + remainingSeconds;
            }
            document.getElementById('countdown').innerHTML = this.minutes + " minutes et " + remainingSeconds + " secondes.";
            if (chrono.seconds == 0) {
                clearInterval(countdownTimer);
                document.getElementById('countdown').innerHTML = "Votre réservation est annulée.";
            }
            else {
                chrono.seconds--;
            }
        }
    }
    var chrono =nsetInterval('chrono.secondPassed()', 1000);

Pouvez vius me dire ce qui cloche sur le deuxieme code pourquoi il ne decremente pas.

[NoSmoking]

Bonjour,
pas tout regardé mais vu cette ligne

Code :

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

var chrono =nsetInterval('chrono.secondPassed()', 1000)

tu redéfinies ta variable chrono et de plus la méthode nsetInterval est définie où ?

[homeland21]

Oui c'est setinterval que je voulais marqué. Je vais réessayer quand je rentre c'est peut être une erreur de syntaxe. Merci.

[homeland21]

Bonjour a tous,
j'ai resolu mon probleme mais avec un code un peu saleet la j'essai d'optimiser mais ç'a ne marche plus ,voyez vous une erreur? mon chrono ne decremente pas.
voici mon code:

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
21
var chrono = {
    minutes: ""
    , secondPassed: function (seconds) {
        var remainingSeconds = seconds % 60;
        this.minutes = Math.round((seconds - 30) / 60)
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdown').innerHTML = this.minutes + " minutes et " + remainingSeconds + " secondes.";
        if (seconds == 0) {
            clearInterval();
            sessionStorage.clear();
            document.getElementById('countdown').innerHTML = "Votre réservation est annulée.";
        }
        else {
            seconds--;
        }
    }
};
 
setInterval('chrono.secondPassed(1200)', 1000);

[NoSmoking]

J'aurais plutôt écris quelque chose comme

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var chrono = {
  minutes: "",
  secondes: 0,
  iTimer: null,
  start: function(param) {
    var _me = this;           // à cause du scope
    this.secondes = param || 0;
    _me.iTimer = setInterval(function() {
        _me.decompte();
      }, 1000);
  },
  stop: function() {
    console.log("Fin décompte...");
    clearInterval(this.iTimer);
  },
  affiche: function(param) {
    var oElem = document.querySelector("#info");
    oElem.innerHTML = param;
  },
  decompte: function() {
    var remainingSeconds = this.secondes % 60;
    this.minutes = Math.round((this.secondes - 30) / 60);
    if (remainingSeconds < 10) {
      remainingSeconds = "0" + remainingSeconds;
    }
    this.affiche(this.minutes + "mn " + remainingSeconds + "s");
    if (this.secondes === 0) {
      this.stop();
      this.affiche("Votre réservation est annulée.");
    }
    else {
      this.secondes -= 1;
    }
  }
};

qui me semble plus lisible mais surement perfectible

[homeland21]

merci bp.