Concaténer deux scripts

Version imprimable

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:

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:

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:

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:

<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

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:

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>

Citation:

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. [...]

:salut:

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:

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>

04/06/2017, 18h59
hagelslag

Merci pour vos réponses.
Dommage, j'aurai bien aimé mon bouton.
05/06/2017, 09h08
eleydet

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?
05/06/2017, 09h21
hagelslag

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

Bonjour,

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

Code:

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>

05/06/2017, 21h32
hagelslag

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
08/06/2017, 12h53
hagelslag

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