Sujet Précédent Sujet Suivant

SessionStorage et compte a rebour en javacript

Fermé
europe21 Messages postés 63 Date d'inscription mardi 26 décembre 2017 Statut Membre Dernière intervention 4 février 2024 - Modifié le 31 déc. 2017 à 16:36
europe21 Messages postés 63 Date d'inscription mardi 26 décembre 2017 Statut Membre Dernière intervention 4 février 2024 - 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.

A voir également:

2 réponses

Réponse 1 / 2
europe21 Messages postés 63 Date d'inscription mardi 26 décembre 2017 Statut Membre Dernière intervention 4 février 2024
1 janv. 2018 à 12:25
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);
0
Réponse 2 / 2
europe21 Messages postés 63 Date d'inscription mardi 26 décembre 2017 Statut Membre Dernière intervention 4 février 2024
2 janv. 2018 à 09:05
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
0