Script Roue qui tourne

**Gramy18** · 22/06/2015, 21h09

Slt ! J'ai un petit probléme en javascript .
J'ai 3 roues avec un bouton en bas de chaque roues , et quand je clique sur ce bouton la roue tourne grâce a un script , sur la roue il y a differente indication avec une fléche au dessus .
Voici une photo de ce sa donne versions web . Et quand je clique sur le 3ieme bouton qui doit faire tourner la roue bah elle tourne pas comme les autres , elle tourne pas d'un coup mais elle tourne un peu que quand je clique enfaite et j'aimerais qu'elle tourne comme les autres .

Voici des liens vers le code sources , pour les curieux je fait ce site pour Bruce Grannec(3* champions du monde de fifa) .
Code HTML: http://textup.fr/131642Pm
Code CSS : http://textup.fr/131643lH
Code JS utilisez pour les roues : http://textup.fr/131644vT

Voila un grand merci a clelui qui solutionnera le probléme Thanks Lien de l'image : http://i.imgur.com/MDVRutk.png Merci bcp

**www.diazis.com** · 22/06/2015, 21h54

Bonjour,

un peu le bordel ton code...

Tu as du javascript dans un fichier séparé et dans ta page html. Le mieux est de tout mettre dans un (ou plusieurs) fichiers séparés.

Code :

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

<script src="index2.js"></script>

Du coup on sait pas ce qu'il y a le fichier index2.js.

Puis tu as une balise <javascript>. C'est quoi ?

Il faudrait que tu fournisses le code de index2.js pour mieux comprendre

**melka one** · 23/06/2015, 09h54

jour

un peu le bordel ton code...

tout a fait

dans ce code je cree une fonction constructeur qui me permet de dupliquer la fonction autant de fois que je le desire (instance)

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
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
 
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="index.css" />
            <title>Pas touche</title>
            <style>
            body
                {
                    background-image: url(logos.jpg);
                }
            </style>
 
	<script type="text/javascript">
 
function spin_wheel(ww,button) {
 
	this.wheel = document.getElementById(ww);
	 this.rando = 0;
	document.getElementById(button).addEventListener("click",this.tourne.bind(this), false);
	   }
 
spin_wheel.prototype.tourne=function(){
 
    this.rando +=Math.round( (Math.random() * 360) + 2880);
 
    this. wheel.style.webkitTransform = "rotate(" + this.rando + "deg)";
    this.wheel.style.mozTransform = "rotate(" + this.rando + "deg)";
    this.wheel.style.msTransform = "rotate(" + this.rando + "deg)";
    this.wheel.style.transform = "rotate(" + this.rando + "deg)";
 
    }
 
 
	function spin_inst() {
 
      new spin_wheel('wheel' ,'button' )
      new spin_wheel('wheel1' ,'button1' )
      new spin_wheel('wheel2' ,'button2' )
    }
 
	window.addEventListener("load",spin_inst, false);
 
	</script>
	</head>
    <body>
            <!-- ETOILE POUR EQUIPES -->
 
    <img src="http://imgur.com/puhagH1.png" id="wheel">
    <br>
    <img src="http://www.blimpage.com/pants/wheel_of_lunch_peg.svg" id="peg">
    <br>
    <button id="button">Etoile</button>
 
            <!-- FIN ETOILE POUR LES EQUIPES -->
 
            <!-- DEBUT DES GAGES -->
 
     <img src="http://i.imgur.com/DHn3Wji.jpg" style="position:relative;top:-300px;left:350px;width:400px;height:400px;"id="wheel1">
    <br>
    <img src="http://www.blimpage.com/pants/wheel_of_lunch_peg.svg" id="peg1">
    <br>
    <button id="button1">Gages</button>
 
      <!-- FIN DES GAGES -->
 
        <!-- DEBUT DU PAS TOUCHE -->
	<img src="http://imgur.com/QFDZqBV.png" style="position:relative;top:-720px;left:820px" id="wheel2"><br>
    <img src="http://www.blimpage.com/pants/wheel_of_lunch_peg.svg" id="peg2"><br>
    <button id="button2">Touche</button>
 
        <!-- FIN DU PAS TOUCHE -->
        </body>
    </html>

**www.diazis.com** · 23/06/2015, 12h41

Ca veut dire que ton button reçoit deux fois le gestionnaire d'évenement click ?
Une fois dans le corps de ta page HTML

Code :

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

button2.addEventListener("click", spin_wheel2, false);

et une fois dans le script qui est chargé

Code :

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

document.getElementById(button).addEventListener("click",this.tourne.bind(this), false);

Pourquoi ?

**melka one** · 23/06/2015, 14h28

pas du tout au moment de l'intanciation on ajoute l'evenement une seule fois pour chaque bouton

essai le code que j'ai mis tu verra

le css pour le teste

Code css :

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
body {
    background-color:blue;
}
 
#wheel {
  display: inline-block;
  width: 20%;
  max-width: 800px;
  height: 20%;
  max-height: 800px;
  margin-top: 3%;
  -webkit-transition: -webkit-transform 10s cubic-bezier(.5,.1,.15,1);
          transition: transform 10s cubic-bezier(.5,.1,.15,1);
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  z-index: 1;
  pointer-events: none;
}
 
#peg {
  display: block;
  width: 3%;
  min-width: 15px;
  max-width: 40px;
  height: auto;
  position: absolute;
  top: 0%;
  left: 8%;
  z-index: 2;
}
 
#button {
  font-size: 24px;
  border-radius: 10px;
  width: 100px;
  height: 60px;
  color: white;
  background: #89bd46;
  border: none;
  display: inline-block;
  margin: 25px;
  z-index: 3;
    position: absolute;
    top:305px;
    left: 3%;
}
 
#button:hover, #button:focus {
  background: #89bd46;
}
 
 
#wheel1 {
  display: inline-block;
  width: 23%;
  max-width: 800px;
  height: 23%;
  max-height: 800px;
  margin-top: 3%;
  -webkit-transition: -webkit-transform 10s cubic-bezier(.5,.1,.15,1);
          transition: transform 10s cubic-bezier(.5,.1,.15,1);
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  z-index: 1;
  pointer-events: none;
 
}
 
#peg1 {
  display: block;
  width: 3%;
  min-width: 15px;
  max-width: 40px;
  height: auto;
  position: absolute;
  top: 0%;
  left: 43%;
  z-index: 2;
}
 
#button1 {
  font-size: 24px;
  border-radius: 10px;
  width: 100px;
  height: 60px;
  color: white;
  background: #89bd46;
  border: none;
  display: inline-block;
  margin: 25px;
  z-index: 3;
    position: absolute;
    top: 437px;
    left: 490px;
}
 
#button:hover, #button:focus {
  background: #89bd46;
}
 
 
 
#wheel2 {
  display: inline-block;
  width: 30%;
  max-width: 800px;
  height: 30%;
  max-height: 800px;
  margin-top: 3%;
  -webkit-transition: -webkit-transform 10s cubic-bezier(.5,.1,.15,1);
          transition: transform 10s cubic-bezier(.5,.1,.15,1);
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  z-index: 1;
  pointer-events: none;
}
 
#peg2 {
  display: block;
  width: 3%;
  min-width: 15px;
  max-width: 40px;
  height: auto;
  position: absolute;
  top: 0%;
  left: 80%;
  z-index: 2;
}
 
#button2 {
  font-size: 24px;
  border-radius: 10px;
  width: 100px;
  height: 60px;
  color: white;
  background: #89bd46;
  border: none;
  display: inline-block;
  margin: 25px;
  z-index: 3;
    position: absolute;
    top: 70%;
    left: 77%;
}
 
#button:hover, #button:focus {
  background: #89bd46;
}

**www.diazis.com** · 23/06/2015, 15h08

Désolé je ne comprend pas.
Tu as bien dans ta page principal http://textup.fr/131642Pm (ton premier post)

Code :

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

button2.addEventListener("click", spin_wheel2, false);

Donc tu affectes la fonction spin_wheel2 au click du bouton 2. Fonction qui fait un rotate de ton image.
Puis dans le fichier que tu as édité dans ton post suivant tu as

Code :

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

new spin_wheel('wheel2' ,'button2' )

qui fait bien

Code :

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

document.getElementById(button).addEventListener("click",this.tourne.bind(this), false);

Donc qui affecte la fonction tourne au click du bouton 2. Fonction qui fait un rotate de ton image également.
Lequel est le bon fichier ?

**NoSmoking** · 23/06/2015, 19h21

Bonjour,

@www.diazis.com :
je pense que tu fais une confusion au niveau des intervenants

**www.diazis.com** · 23/06/2015, 20h21

ah oui surement

sorry

**melka one** · 23/06/2015, 20h25

je pense aussi

Script Roue qui tourne

JavaScript

Discussions similaires

Partager

Partager