Concaténer deux scripts

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

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, 12h25

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, 12h26

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, 19h59

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

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

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, 10h21

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, 11h03

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>

Concaténer deux scripts

JavaScript

Vue hybride

Discussions similaires

Partager

Partager