SessionStorage et compte a rebour en javacript

europe21 12 Messages postés mardi 26 décembre 2017Date d'inscription 11 janvier 2018 Dernière intervention - 29 déc. 2017 à 16:03 - Dernière réponse : europe21 12 Messages postés mardi 26 décembre 2017Date d'inscription 11 janvier 2018 Dernière intervention
- 2 janv. 2018 à 09:05
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.

Afficher la suite 

2 réponses

Répondre au sujet
europe21 12 Messages postés mardi 26 décembre 2017Date d'inscription 11 janvier 2018 Dernière intervention - 1 janv. 2018 à 12:25
0
Utile
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);
Commenter la réponse de europe21
europe21 12 Messages postés mardi 26 décembre 2017Date d'inscription 11 janvier 2018 Dernière intervention - 2 janv. 2018 à 09:05
0
Utile
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
Commenter la réponse de europe21