Concaténer deux scripts

**hagelslag** · 02/06/2017, 21h58

Bonjour à tous,

J'ai récupé deux scripts sur internet qui fonctionnent très bien.
Ils peuvent intéresser certains novices comme moi.

Le premier permet de changer la couleur du bouton durant une période :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script>
var webbutton="";
function setTo20s (webbutton) {
document.getElementById(webbutton).style.backgroundColor = "#FF0000";
setTimeout(function(){ setToBlack(webbutton) }, 20000);
} 
function setToBlack (webbutton){
document.getElementById(webbutton).style.backgroundColor= "#009933";
}
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="https://www.google.fr/"  target="_blank">
<input type="button" name="clickMe" id="test" value="Test Google" onclick="setTo20s('test')"/></a>

Le second est un compteur qui décrémente le temps :

Code :

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
    <script>
                               var seconds = 300;
                               function secondPassed() {
                               var minutes = Math.round((seconds - 30)/60);
                               var remainingSeconds = seconds % 60;
                               if (remainingSeconds < 10) {
                               remainingSeconds = "0" + remainingSeconds;  
                               }
                               document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
                               if (seconds == 0) {
                               clearInterval(countdownTimer);
                               document.getElementById('countdown').innerHTML = "Buzz Buzz";
                               } else {
                               seconds--;
                               }
                               }
                               var countdownTimer = setInterval('secondPassed()', 1000);
    </script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id="countdown" class="timer">

Mon souhait est d'intégrer le script du compteur de décompte (script 2) dans le script du bouton de couleur (script 1) afin de visualiser simultanément le changement de couleur et le décompte lorsque je clique sur le bouton.
J'ai tenté beaucoup de chose, mais je n'ai pas vos talents.
Si quelqu'un à une solution, merci

**eleydet** · 03/06/2017, 11h25

Bonjour,

Un peu bizarre, ce bouton inclu dans le lien.. Quel est l'intérêt?

Sinon, avez-vous essayé la solution ci-dessous?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="https://www.google.fr/"  target="_blank">
<input type="button" name="clickMe" id="test" value="Test Google" onclick="setTo20s('test');countdownTimer=setInterval('secondPassed()',1000);"/></a>
<span id="countdown" class="timer"></span>

**danielhagnoul** · 03/06/2017, 11h26

Envoyé par hagelslag

[...] Mon souhait est d'intégrer le script du compteur de décompte (script 2) dans le script du bouton de couleur (script 1) afin de visualiser simultanément le changement de couleur et le décompte lorsque je clique sur le bouton. [...]

Il est possible d'avoir un bouton qui change de couleur et qui affiche le décompte, mais le lien (tag a) ne fonctionnera plus à cause des sécurités intégrées dans les navigateurs modernes, car un tag a doit être cliqué par l'utilisateur et une popup (window.open()) sera bloquée.

Dans le passé, on pouvait contourner le problème en relançant l'événement (event), mais cela ne fonctionne plus. Exemple :

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
97
98
99
100
<!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.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
                
    th, td {
      width: 10rem;
      border: 1pt dotted grey;
      padding: 0.3rem;
    }
                
                button {
                        font-size: 2rem;
                }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.3.js"></script>
  <script>
    'use strict';
    
    document.addEventListener( "DOMContentLoaded", ev => {
      
      // code
      
    }, false );
    
    window.addEventListener( "load", ev => { 
      moment.locale( "fr" );
      
      // code du test
                        const
                                btnClickMe = document.querySelector( "#btnClickMe" ),
                                countDown = document.querySelector( "#countDown" );
                                
                        let boolGoToLink = false;
                        
                        btnClickMe.addEventListener( "click", ev => {
                                if ( boolGoToLink === false ){
                                        const new_event = new ev.constructor( ev.type, ev );
                                        
                                        ev.preventDefault();
                                        ev.stopPropagation();
                                        
                                        btnClickMe.style.backgroundColor = "rgba( 255, 0, 0, 0.5 )";
                                        
                                        let
                                                seconds = 20,
                                                countdownTimer = null;
                                        
                                        function secondPassed( ){
                                                let
                                                        minutes = Math.round( ( seconds - 30 ) / 60 ),
                                                        remainingSeconds = seconds % 60;
                                                
                                                if ( remainingSeconds < 10 ) {
                                                        remainingSeconds = "0" + remainingSeconds;  
                                                }
                                                
                                                countDown.textContent = minutes + ":" + remainingSeconds;
                                                
                                                if ( seconds === 0 ) {
                                                        clearInterval( countdownTimer );
                                                        btnClickMe.style.backgroundColor= "rgba( 0, 153, 51, 0.5 )";
                                                        countDown.textContent = "Buzz Buzz";
                                                        boolGoToLink = true;
                                                        ev.target.dispatchEvent( new_event ); // bloqué par les sécurités des navigateurs !
                                                } else {
                                                        seconds--;
                                                }
                                        }
                                        
                                        secondPassed();
                                        
                                        countdownTimer = setInterval( secondPassed, 1000 );
                                } else {
                                        boolGoToLink = false;
                                }
                        }, false );
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
 
	<a href="https://www.google.fr/" rel="noreferrer noopener" target="_blank">
		<button id="btnClickMe">Google <span id="countDown"></span></button>
	</a>
 
</body>
</html>

**hagelslag** · 04/06/2017, 18h59

Merci pour vos réponses.
Dommage, j'aurai bien aimé mon bouton.

**eleydet** · 05/06/2017, 09h08

Bonjour,

Vous avez présenté deux ébauches de solution, mais je n'ai compris que vaguement le problème que vous voulez résoudre. Il fait quoi, au juste, votre bouton? Que doit-on obtenir après avoir cliqué dessus?

**hagelslag** · 05/06/2017, 09h21

Bonjour,

Mon idéal, un bouton vert ouvrant un lien dans une nouvelle page (target="_blank")
Après Clic, ce même bouton change de couleur et contient un Timer qui décompte 5 minutes 30 secondes
Mon premier script est parfait, il lui manque simplement l'aspect visuel du décompte du temps

Merci

**eleydet** · 05/06/2017, 10h03

Bonjour,

Je reformule ma question : Avez-vous essayé la solution ci-dessous?

Code :

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      var seconds = 300;
      function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
          remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
          clearInterval(countdownTimer);
          document.getElementById('countdown').innerHTML = "Buzz Buzz";
        } else {
          seconds--;
        }
      }
      // var countdownTimer = setInterval('secondPassed()', 1000);
      var webbutton="";
      function setTo20s (webbutton) {
        document.getElementById(webbutton).style.backgroundColor = "#FF0000";
        setTimeout(function(){ setToBlack(webbutton) }, 20000);
      }
      function setToBlack (webbutton){
        document.getElementById(webbutton).style.backgroundColor= "#009933";
      }
    </script>
  </head>
  <body>
    <a href="https://www.google.fr/"  target="_blank">
      <input type="button" name="clickMe" id="test" value="Test Google" onclick="setTo20s('test');countdownTimer=setInterval('secondPassed()',1000);"/></a>
    <span id="countdown" class="timer"></span>
  </body>
</html>

**hagelslag** · 05/06/2017, 21h32

Merci Eleydet,

Votre solution fonctionne très bien, mais le timer se situe à l'extérieur du bouton.
Au vu du propos de danielhagnoul, celà semble impossible maintenant.
Si tel est le cas, je vais adapté mon besoin à votre proposition.

Merci pour votre script

**hagelslag** · 08/06/2017, 12h53

Bonjour,

Désolé, je reviens avec une question complémentaire.
La solution fonctionne pafaitement, mais une seule fois.
Je pensais quand intégrant le script dans un fichier externe, le bouton pourrait appeler autant que nécessaire la fonction, mais non, il me faut recharger la page

Avez-vous une idée pour éviter ce rechargement de page ?
Le point m'ennuie car j'ai plusieurs bouton similaires avec Timer sur la même page HTML, et le rechargement efface les Timer en cours.

Merci

Concaténer deux scripts

JavaScript

Discussions similaires

Partager

Partager