Compte à rebours (countdown)
par
, 01/04/2017 à 23h58 (1432 Affichages)
J'ai utilisé la librairie moment.js, voir :
La fonction countdown( id = "#countdown", interval = 1, seconds = 20, minutes = 0, hours = 0, days = 0, months = 0, years = 0 ) prend tous les paramètres nécessaires pour compter le temps à rebours.
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
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 const countdown = ( id = "#countdown", interval = 1, seconds = 20, minutes = 0, hours = 0, days = 0, months = 0, years = 0 ) => { const ctx = new AudioContext(), note = ( frequency = 277.18, duration = 1.0, type = "sine" ) => { // note : https://www.developpez.net/forums/blogs/285162-danielhagnoul/b1797/jouer-quelques-notes-musique-charger-librairie-externe/ let osc = ctx.createOscillator(), gainNode = ctx.createGain(); osc.type = type; osc.connect( gainNode ); osc.frequency.value = frequency; gainNode.connect( ctx.destination ); osc.start( 0 ); gainNode.gain.exponentialRampToValueAtTime( 0.00001, ctx.currentTime + duration ); return Promise.resolve( "note" ); }; let timer = document.querySelector( id ), duration = moment.duration({ "seconds" : seconds, "minutes" : minutes, "hours" : hours, "days" :days, "months" : months, "years" : years }), ObjInterval = setInterval( () => { duration.subtract( interval, "seconds" ); if ( duration.asMilliseconds() > -1 ){ timer.value = "Il reste : " + duration.get( "years" ) + " an(s), " + duration.get( "months" ) + " mois, " + duration.get( "days" ) + " jour(s), " + duration.get( "hours" ) + " heure(s), " + duration.get( "minutes" ) + " minute(s), " + duration.get( "seconds" ) + " seconde(s)"; } else { clearInterval( ObjInterval ); // https://www.developpez.net/forums/blogs/285162-danielhagnoul/b1797/jouer-quelques-notes-musique-charger-librairie-externe/ note( 261.63, 2.0 ).catch( er => { console.error( er ) } ); } }, interval * 1000 ); };
Exemple, compte à rebours pendant une minute et 20 secondes avec un intervalle d'une seconde : countdown( "#countdown", 1, 20, 1 );.
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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 <!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta http-equiv="cache-control" content="public, max-age=60"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Daniel Hagnoul"> <title>Test</title> <style> </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script> 'use strict'; const countdown = ( id = "#countdown", interval = 1, seconds = 20, minutes = 0, hours = 0, days = 0, months = 0, years = 0 ) => { const ctx = new AudioContext(), note = ( frequency = 277.18, duration = 1.0, type = "sine" ) => { // note : https://www.developpez.net/forums/blogs/285162-danielhagnoul/b1797/jouer-quelques-notes-musique-charger-librairie-externe/ let osc = ctx.createOscillator(), gainNode = ctx.createGain(); osc.type = type; osc.connect( gainNode ); osc.frequency.value = frequency; gainNode.connect( ctx.destination ); osc.start( 0 ); gainNode.gain.exponentialRampToValueAtTime( 0.00001, ctx.currentTime + duration ); return Promise.resolve( "note" ); }; let timer = document.querySelector( id ), duration = moment.duration({ "seconds" : seconds, "minutes" : minutes, "hours" : hours, "days" :days, "months" : months, "years" : years }), ObjInterval = setInterval( () => { duration.subtract( interval, "seconds" ); if ( duration.asMilliseconds() > -1 ){ timer.value = "Il reste : " + duration.get( "years" ) + " an(s), " + duration.get( "months" ) + " mois, " + duration.get( "days" ) + " jour(s), " + duration.get( "hours" ) + " heure(s), " + duration.get( "minutes" ) + " minute(s), " + duration.get( "seconds" ) + " seconde(s)"; } else { clearInterval( ObjInterval ); // https://www.developpez.net/forums/blogs/285162-danielhagnoul/b1797/jouer-quelques-notes-musique-charger-librairie-externe/ note( 261.63, 2.0 ).catch( er => { console.error( er ) } ); } }, interval * 1000 ); }; document.addEventListener( 'DOMContentLoaded', ev => { }, false ); window.addEventListener( 'load', ev => { // id, intervalle en secondes, secondes, minutes, heures, jours, mois, ans // ci-dessous : une minute et 20 secondes avec un intervalle d'une seconde countdown( "#countdown", 1, 20, 1 ); }, false ); </script> </head> <body> <main> <output id="countdown"></output> </main> </body> </html>
La fonction countdownFromDate( id = "#countdown", interval = 1, date = moment().add( 20, "seconds" ) ) compte à rebours à partir d'une date future
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 const countdownFromDate = ( id = "#countdown", interval = 1, date = moment().add( 20, "seconds" ) ) => { const duration = moment.duration( moment( date ) - moment(), "milliseconds" ); if ( duration.asMilliseconds() > 999 ){ countdown( id, interval, duration.get( "seconds" ), duration.get( "minutes" ), duration.get( "hours" ), duration.get( "days" ), duration.get( "months" ), duration.get( "years" ) ); } };
Exemple, compte à rebours à partir du 4 avril 2017 à 0 heures, 15 minutes et 30 secondes (2017-04-04 00:15:30) :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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 <!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta http-equiv="cache-control" content="public, max-age=60"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Daniel Hagnoul"> <title>Test</title> <style> </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script> 'use strict'; const countdown = ( id = "#countdown", interval = 1, seconds = 20, minutes = 0, hours = 0, days = 0, months = 0, years = 0 ) => { const ctx = new AudioContext(), note = ( frequency = 277.18, duration = 1.0, type = "sine" ) => { // note : https://www.developpez.net/forums/blogs/285162-danielhagnoul/b1797/jouer-quelques-notes-musique-charger-librairie-externe/ let osc = ctx.createOscillator(), gainNode = ctx.createGain(); osc.type = type; osc.connect( gainNode ); osc.frequency.value = frequency; gainNode.connect( ctx.destination ); osc.start( 0 ); gainNode.gain.exponentialRampToValueAtTime( 0.00001, ctx.currentTime + duration ); return Promise.resolve( "note" ); }; let timer = document.querySelector( id ), duration = moment.duration({ "seconds" : seconds, "minutes" : minutes, "hours" : hours, "days" :days, "months" : months, "years" : years }), ObjInterval = setInterval( () => { duration.subtract( interval, "seconds" ); if ( duration.asMilliseconds() > -1 ){ timer.value = "Il reste : " + duration.get( "years" ) + " an(s), " + duration.get( "months" ) + " mois, " + duration.get( "days" ) + " jour(s), " + duration.get( "hours" ) + " heure(s), " + duration.get( "minutes" ) + " minute(s), " + duration.get( "seconds" ) + " seconde(s)"; } else { clearInterval( ObjInterval ); // https://www.developpez.net/forums/blogs/285162-danielhagnoul/b1797/jouer-quelques-notes-musique-charger-librairie-externe/ note( 261.63, 2.0 ).catch( er => { console.error( er ) } ); } }, interval * 1000 ); }, countdownFromDate = ( id = "#countdown", interval = 1, date = moment().add( 20, "seconds" ) ) => { const duration = moment.duration( moment( date ) - moment(), "milliseconds" ); if ( duration.asMilliseconds() > 999 ){ countdown( id, interval, duration.get( "seconds" ), duration.get( "minutes" ), duration.get( "hours" ), duration.get( "days" ), duration.get( "months" ), duration.get( "years" ) ); } }; document.addEventListener( 'DOMContentLoaded', ev => { }, false ); window.addEventListener( 'load', ev => { // ci-dessous, compte à rebours à partir d'une date future countdownFromDate( "#countdown", 1, "2017-04-04 00:15:30" ); }, false ); </script> </head> <body> <main> <output id="countdown"></output> </main> </body> </html>
EDIT 2018-08-18
Fichier dvjhUtilities-1.8.3.js , modification de la fonction kCountdown : amélioration de la présentation du temps restant.