sessionStorage et compte a rebour en javacript Fermé

Question

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:
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:
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.

Configuration: Windows / Chrome 63.0.3239.84

europe21 · Answer

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

europe21 · Answer

J'ai bien avancé j'ai tout converti en seconde , du coup je peux me servir de mon objet chrono pour lancer la décrémentation. Il faut juste que je modifie mon objet mais je ne sais pas pourquoi mon objet ne fonctionne plus quand je le modifie.

Voici mon objet initial:
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é qui ne décrémente pas:

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 vous me dire ce qui cloche sur le deuxieme code pourquoi il ne decremente pas.

merci

SessionStorage et compte a rebour en javacript

2 réponses

Discussions similaires