danielhagnoul

Compte à rebours (countdown)

Noter ce billet

par

, 01/04/2017 à 23h58 (1392 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>