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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| <head>
<style>
#time {
display:inline;
}
</style>
<script>
class Chrono {
constructor(minutes = 0, secondes = 0) {
this.elem = document.querySelector('#time');
this.elem.style.display=""; //l'affichage par défaut s'applique
this.duree = ((minutes * 60) + secondes) * 1000;
this.iTimer = null;
this.timeEnd;
}
startTimer(timeEnd) {
if( timeEnd) {
this.timeEnd = timeEnd;
}
else {
this.timeEnd = Date.now() + this.duree;
}
this.iTimer = setInterval(() => {
this.decompteTimer();
}, 1000);
this.decompteTimer();
}
stopTimer() {
clearInterval(this.iTimer);
}
decompteTimer() {
const reste = Math.ceil((this.timeEnd - Date.now()) / 1000);
if (reste > 0) {
const h = ("00" + parseInt(reste / 3600, 10)).slice(-2);
const m = ("00" + parseInt((reste % 3600) / 60, 10)).slice(-2);
const s = ("00" + parseInt((reste % 3600) % 60, 10)).slice(-2);
this.elem.textContent = h + ":" + m + ":" + s;
}
else {
clearInterval(this.iTimer);
this.elem.textContent = "Comptage terminé !";
}
}
}
class Reservation {
constructor(station, min, sec) {
this.station = station;
this.min = min;
this.sec = sec;
//this.status = Dom.textChronoElement; /!\/!\/!\ ligne désactivée pour le test
}
storeDatas() {
const storage = new Storage(this.station);
storage.dataRecord(this.station);
}
startReservation() {
console.log('chrono');
const chrono = new Chrono(20);
chrono.startTimer();
window.addEventListener("beforeunload", function (event) {
// récup. du temps restant
const tempsRestant = chrono.timeEnd - Date.now();
if (tempsRestant > 0){
// store date de fin du chrono en millisecondes
sessionStorage.setItem( "timeEnd", chrono.timeEnd);
// juste pour voir clairement la date dans le storage
sessionStorage.setItem( "dateEnd", new Date( chrono.timeEnd));
}
else {
sessionStorage.clear();
}
});
}
checkReservation() {
// read date de fin du chrono en millisecondes
// Attention cast string to number avec l'unary plus (+)
const timeEnd = +sessionStorage.getItem( "timeEnd");
const tempsRestant = timeEnd - Date.now();
if( tempsRestant > 0){
const chrono = new Chrono();
// relance timer avec date de fin de chrono
chrono.startTimer(timeEnd);
return true;
}
return false;
}
}
window.addEventListener("load", function (event) {
const ob_buttonStart=document.getElementById("buttonStart");
if(ob_reservation.checkReservation()===false) {
ob_buttonStart.addEventListener("click",function (event) {
this.disabled=true;
ob_reservation.startReservation();
});
}
else {
ob_buttonStart.disabled=true;
}
});
const ob_reservation=new Reservation("test",20,0);
</script>
</head>
<div id="time" style="display:none;"></div>
<input type="button" id="buttonStart" value="Démarrer"> |
Répondre avec citation
Envoyé par Lunesti
:
)
Partager