sessionStorage et compte a rebours javascript

Version imprimable

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:

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:

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.

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:

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);

01/01/2018, 18h47
melka one

jour

le mieux serait de tous convertir en milliseconde pour le calcul

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:

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:

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.

02/01/2018, 16h39
NoSmoking

Bonjour,
pas tout regardé mais vu cette ligne

Code:

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

tu redéfinies ta variable chrono et de plus la méthode nsetInterval est définie où ?
02/01/2018, 16h43
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.

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:

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);

J'aurais plutôt écris quelque chose comme

Code:

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 ;)

01/02/2018, 21h55
homeland21

merci bp.