Script Roue qui tourne

Version imprimable

22/06/2015, 21h09
Gramy18

Script Roue qui tourne

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
22/06/2015, 21h54
www.diazis.com

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:

<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

jour

Citation:

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:

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>

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

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:

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

et une fois dans le script qui est chargé

Code:

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

Pourquoi ?

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:

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;
}

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

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

Code:

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:

new spin_wheel('wheel2' ,'button2' )

qui fait bien

Code:

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 ?
23/06/2015, 19h21
NoSmoking

Bonjour,

@www.diazis.com :
je pense que tu fais une confusion au niveau des intervenants ;)
23/06/2015, 20h21
www.diazis.com

ah oui surement :(
sorry
23/06/2015, 20h25
melka one

je pense aussi :aie: