Bonjour dans un petit projet je voulais stocker un nombre quand celui ci arrivait a 0.
De cette manière quand on recharge la page le nombre est toujours égale a 0 et on ne peut pas tourner la roue.
En revanche après un certains temps écoulé on pourra retourner la roue.
Le problème quand j'actualise la roue tourne toujours même si précédemment la valeur de count valait 0...
le html
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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320 <?php include('inthehead.php');?> <link rel="stylesheet" type="text/css" href="style3.css"/> </head> <body> <?php include("barmenu.php"); ?> <div id="ongen"> <div id="gen"> <h1> Generator <svg height="50" width="50" style="position : relative; top : 5px;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hand-receiving" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fas-hand-receiving fa-w-20 fa-5x"><path fill="currentColor" d="M204.8 230.4c-10.6-14.1-30.7-17-44.8-6.4-14.1 10.6-17 30.7-6.4 44.8l38.1 50.8c4.8 6.4 4.1 15.3-1.5 20.9l-12.8 12.8c-6.7 6.7-17.6 6.2-23.6-1.1L64 244.4V96c0-17.7-14.3-32-32-32S0 78.3 0 96v218.4c0 10.9 3.7 21.5 10.5 30l104.1 134.3c5 6.5 8.4 13.9 10.4 21.7 1.8 6.9 8.1 11.6 15.3 11.6H272c8.8 0 16-7.2 16-16V384c0-27.7-9-54.6-25.6-76.8l-57.6-76.8zM608 64c-17.7 0-32 14.3-32 32v148.4l-89.8 107.8c-6 7.2-17 7.7-23.6 1.1l-12.8-12.8c-5.6-5.6-6.3-14.5-1.5-20.9l38.1-50.8c10.6-14.1 7.7-34.2-6.4-44.8-14.1-10.6-34.2-7.7-44.8 6.4l-57.6 76.8C361 329.4 352 356.3 352 384v112c0 8.8 7.2 16 16 16h131.7c7.1 0 13.5-4.7 15.3-11.6 2-7.8 5.4-15.2 10.4-21.7l104.1-134.3c6.8-8.5 10.5-19.1 10.5-30V96c0-17.7-14.3-32-32-32zm-169.3 41.6L342.4 9.3C330-3.1 310-3.1 297.6 9.3l-96.4 96.4c-12.4 12.3-12.4 32.4 0 44.7l96.4 96.4c12.3 12.3 32.4 12.3 44.7 0l96.4-96.4c12.4-12.4 12.4-32.4 0-44.8z" class=""></path></svg></h1> </div> </div> <!-- <div id="onGenerator"> <div id="Generator"> <a onclick="javascript:randomGen(generate)" target="_blank"><button id="getAlt">Make your Wish</button></a> </div> </div> --> <div class="cre"> <!-- <img class="cret" src="steeringwheel.svg" alt="steering wheel" height ="600px" width = "600px" style="display : block; margin-left : auto; margin-right : auto;z-index : 5; transition : 1;" /> --> <svg id="image0" height="600" width="600" fill="white" class="cret" version="1.0" xmlns="http://www.w3.org/2000/svg" width="1154.000000pt" height="1155.000000pt" viewBox="0 0 1154.000000 1155.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,1155.000000) scale(0.100000,-0.100000)" fill="" stroke="" transition = "all 1s"> <path id="pa" class="cre1" d="M5704 11531 c-97 -24 -196 -108 -242 -209 -42 -93 -40 -160 18 -647 l51 -429 -15 -103 c-16 -109 -31 -146 -103 -253 l-44 -67 7 -76 7 -76 -34 -5 c-19 -3 -72 -11 -119 -17 -441 -56 -954 -230 -1364 -463 -166 -94 -270 -163 -424 -278 l-134 -100 -62 61 c-60 59 -65 62 -171 92 -61 17 -130 42 -155 57 -74 42 -267 244 -365 382 -298 419 -394 511 -561 541 -152 27 -306 -53 -367 -190 -47 -107 -27 -272 47 -371 21 -29 168 -152 392 -329 446 -352 494 -406 530 -596 17 -89 18 -91 80 -155 l63 -65 -76 -100 c-423 -560 -673 -1177 -768 -1897 l-6 -48 -84 0 c-84 0 -84 0 -193 -60 -137 -76 -177 -84 -397 -77 -132 4 -217 13 -385 42 -269 45 -448 56 -535 30 -110 -32 -195 -100 -247 -197 -19 -36 -23 -58 -23 -138 0 -81 4 -103 25 -145 32 -66 106 -137 177 -171 94 -44 157 -43 648 16 394 47 437 50 511 40 122 -16 172 -34 254 -92 l75 -52 86 2 86 3 12 -103 c77 -645 338 -1291 743 -1840 l81 -110 -60 -61 c-35 -36 -63 -75 -67 -92 -4 -16 -20 -74 -37 -127 -24 -81 -38 -108 -82 -160 -116 -140 -161 -178 -538 -453 -169 -124 -267 -221 -310 -310 -31 -64 -34 -77 -34 -165 0 -84 3 -102 28 -151 32 -66 100 -132 162 -160 135 -60 319 -18 422 94 21 23 148 182 282 352 278 353 294 371 376 430 86 61 111 72 218 94 96 19 96 19 150 77 l54 58 119 -91 c554 -422 1208 -693 1872 -774 l102 -13 0 -83 c0 -74 3 -87 31 -134 87 -148 101 -187 111 -309 12 -137 2 -265 -42 -525 -43 -255 -57 -417 -42 -497 35 -187 177 -321 342 -322 37 0 87 7 118 18 70 24 159 106 196 181 53 110 53 124 -3 600 -28 236 -51 459 -51 496 0 145 31 240 117 360 31 44 33 51 33 131 l0 85 63 7 c126 14 351 57 500 95 502 130 994 369 1395 677 45 35 85 64 89 64 4 0 30 -22 58 -50 48 -47 58 -52 175 -86 69 -19 135 -42 148 -50 52 -34 194 -169 254 -241 36 -43 120 -156 189 -252 133 -187 273 -344 344 -385 65 -39 158 -60 233 -53 264 25 389 317 235 550 -30 46 -89 98 -313 274 -151 120 -316 250 -366 290 -92 72 -175 169 -214 248 -11 22 -28 83 -39 135 -19 94 -20 96 -74 145 l-55 50 69 90 c139 181 300 437 402 642 189 377 333 849 378 1246 l13 107 69 0 c67 0 74 2 188 66 113 62 123 66 216 76 136 14 282 4 533 -37 292 -48 433 -60 518 -45 138 23 238 94 294 208 28 57 33 76 32 142 0 99 -32 168 -114 243 -63 59 -132 91 -217 102 -32 5 -195 -11 -483 -45 -576 -69 -636 -65 -808 46 -81 53 -84 54 -157 54 -53 0 -75 4 -75 13 0 6 -11 84 -25 172 -100 635 -360 1242 -755 1761 l-78 102 58 58 c55 57 59 64 94 184 30 98 46 136 78 177 75 98 243 247 418 372 305 219 394 301 446 409 39 81 45 212 14 295 -61 162 -247 244 -426 188 -38 -11 -90 -36 -115 -55 -29 -22 -136 -148 -285 -337 -306 -387 -329 -415 -397 -470 -85 -68 -142 -96 -242 -115 -88 -17 -92 -19 -152 -77 l-61 -60 -114 85 c-423 318 -890 541 -1398 669 -128 32 -311 66 -517 95 l-33 5 0 81 c0 81 0 82 -60 189 -36 64 -64 129 -70 160 -16 85 -11 331 10 464 79 504 85 594 51 706 -58 185 -237 300 -407 260z m171 -75 c90 -38 154 -119 182 -231 15 -60 15 -84 5 -194 -6 -69 -28 -223 -48 -341 -32 -190 -36 -235 -37 -390 0 -102 5 -196 12 -225 7 -27 34 -90 62 -139 27 -49 48 -90 47 -91 -2 -1 -52 1 -113 6 -135 10 -344 10 -447 1 l-77 -7 20 30 c69 104 109 239 109 365 0 26 -23 238 -51 471 -30 255 -48 446 -46 480 9 109 78 212 172 255 59 28 156 32 210 10z m3842 -1592 c55 -22 98 -61 129 -116 24 -46 28 -64 29 -133 0 -67 -5 -90 -28 -139 -34 -73 -131 -170 -276 -276 -306 -222 -387 -286 -462 -362 -123 -123 -165 -185 -195 -287 -14 -47 -28 -94 -32 -104 -6 -15 -21 -2 -84 70 -80 92 -251 262 -327 325 l-43 37 28 6 c132 29 209 68 319 162 21 18 168 196 325 396 310 392 327 409 438 433 62 14 128 9 179 -12z m-7635 -22 c81 -40 164 -126 293 -304 189 -262 257 -347 357 -444 130 -126 159 -145 286 -184 l103 -32 -48 -41 c-133 -116 -276 -259 -371 -370 l-32 -37 -6 27 c-28 131 -45 167 -127 277 -43 56 -116 119 -422 361 -203 162 -380 308 -392 327 -42 63 -56 110 -56 188 0 61 4 84 26 126 70 138 234 183 389 106z m4016 -38 c19 -6 22 -13 22 -63 l0 -57 -87 8 c-126 12 -392 14 -501 5 l-93 -9 3 59 3 58 60 7 c73 8 561 2 593 -8z m64 -219 c1501 -151 2780 -1177 3253 -2610 87 -263 144 -523 176 -815 17 -152 18 -601 1 -760 -160 -1517 -1181 -2784 -2627 -3262 -231 -76 -520 -138 -800 -170 -147 -17 -617 -17 -770 0 -484 54 -915 181 -1340 396 -902 457 -1588 1252 -1905 2205 -138 416 -194 759 -194 1201 0 274 10 396 50 640 63 382 172 713 356 1080 197 396 442 728 762 1037 814 786 1917 1170 3038 1058z m-2957 -766 l40 -40 -30 -26 c-184 -155 -333 -302 -421 -415 -12 -16 -26 -28 -31 -28 -5 0 -26 17 -46 38 l-37 38 79 89 c111 126 381 385 401 385 3 0 24 -18 45 -41z m5295 -52 c93 -83 230 -224 329 -341 l33 -39 -38 -38 c-21 -22 -41 -39 -45 -39 -3 0 -42 42 -85 93 -98 114 -238 254 -327 326 l-67 55 37 38 c20 21 42 38 48 38 5 0 57 -42 115 -93z m1297 -2664 c10 -49 10 -533 0 -595 l-8 -48 -52 0 -52 0 8 137 c7 133 2 403 -9 490 -7 45 -2 48 73 52 29 1 33 -2 40 -36z m-7934 -60 c-10 -112 -10 -483 -1 -545 l8 -48 -59 0 -60 0 -7 58 c-10 73 -10 420 0 535 l8 87 59 0 59 0 -7 -87z m-157 -10 c-9 -102 -9 -446 0 -513 l7 -53 -47 32 c-91 63 -215 99 -341 101 -27 0 -251 -23 -497 -51 -397 -47 -453 -51 -500 -41 -157 36 -260 164 -245 306 10 98 77 185 177 230 107 48 222 45 579 -15 263 -44 379 -53 528 -41 128 11 128 11 233 65 58 30 107 55 109 56 2 1 1 -34 -3 -76z m8196 38 c71 -45 137 -65 253 -81 73 -9 122 -5 540 44 494 58 512 59 601 15 53 -25 116 -87 140 -137 10 -20 20 -67 22 -105 4 -57 0 -75 -22 -121 -31 -63 -89 -119 -155 -150 -41 -19 -63 -21 -196 -20 -127 0 -184 6 -375 39 -205 36 -242 39 -410 40 -102 0 -206 -4 -231 -8 -25 -4 -89 -32 -143 -61 l-97 -54 8 71 c9 91 10 503 0 540 -4 15 -5 27 -3 27 3 0 33 -18 68 -39z m-7062 -2891 c105 -122 192 -210 298 -302 l94 -81 -41 -40 -40 -40 -38 28 c-60 46 -247 230 -349 345 l-94 105 42 42 c23 24 45 40 49 35 3 -4 39 -45 79 -92z m6000 -29 c-58 -81 -290 -314 -414 -416 l-47 -38 -40 39 c-21 21 -38 41 -37 45 2 3 53 49 113 101 113 98 224 210 309 310 l48 57 43 -36 44 -36 -19 -26z m-6132 -54 c62 -76 236 -254 320 -329 l74 -64 -85 -23 c-92 -24 -192 -84 -275 -164 -24 -23 -165 -196 -314 -385 -265 -336 -297 -371 -368 -408 -52 -26 -178 -31 -237 -9 -149 57 -209 231 -134 391 40 85 118 161 305 298 301 219 344 253 428 338 133 133 169 187 204 307 16 55 31 101 34 101 3 -1 24 -24 48 -53z m6181 -52 c7 -33 26 -85 42 -115 63 -119 121 -174 479 -457 190 -149 364 -292 387 -318 96 -105 103 -283 15 -386 -74 -86 -206 -114 -328 -68 -102 39 -186 132 -472 527 -88 122 -199 242 -298 322 -62 49 -90 64 -172 90 -53 17 -103 33 -110 35 -8 3 4 20 35 47 122 105 237 216 314 303 46 52 86 91 90 87 3 -4 12 -34 18 -67z m-3224 -1194 c83 -4 217 -4 299 1 81 5 149 8 151 6 1 -2 5 -27 7 -55 l5 -53 -36 -7 c-46 -10 -541 -10 -601 0 l-45 7 3 59 4 59 31 -4 c18 -3 100 -8 182 -13z m45 -156 c96 -3 222 -2 280 3 58 5 106 8 108 7 2 -2 -15 -31 -38 -66 -46 -72 -65 -128 -80 -249 -10 -79 -7 -118 40 -520 57 -484 59 -544 17 -625 -120 -234 -424 -214 -518 34 -31 84 -23 277 25 561 42 244 54 437 38 573 -12 91 -25 128 -87 236 l-36 64 38 -6 c21 -3 117 -9 213 -12z"/> <path class="cre1" d="M5500 8599 c-882 -91 -1679 -600 -2137 -1364 -468 -780 -527 -1745 -158 -2588 139 -316 374 -651 625 -890 540 -513 1218 -787 1951 -787 460 0 845 89 1255 291 290 142 544 328 780 571 413 426 673 951 765 1549 33 207 33 609 1 814 -76 490 -251 905 -546 1300 -119 158 -383 422 -541 541 -423 316 -881 500 -1395 559 -146 16 -456 18 -600 4z m626 -34 c1063 -127 1965 -860 2311 -1880 99 -294 143 -566 143 -895 0 -336 -44 -608 -149 -912 -335 -971 -1175 -1679 -2191 -1847 -542 -90 -1114 -13 -1617 216 -361 165 -718 437 -980 748 -280 331 -500 778 -587 1193 -50 235 -60 341 -60 602 0 309 27 509 104 778 103 357 304 733 543 1017 612 728 1537 1092 2483 980z"/> <path class="cre1" d="M5458 8515 c-1617 -204 -2708 -1728 -2373 -3314 122 -575 448 -1122 900 -1511 401 -343 874 -559 1406 -641 192 -30 561 -32 744 -5 637 93 1147 346 1591 790 233 234 383 441 525 726 434 873 371 1913 -167 2727 -108 163 -220 299 -364 443 -418 416 -947 683 -1540 776 -144 22 -575 28 -722 9z m640 -61 l52 -7 0 -43 c0 -44 -1 -44 -27 -37 -37 10 -620 10 -655 0 -28 -7 -28 -7 -28 37 l0 44 63 6 c34 3 78 8 97 10 46 6 430 -3 498 -10z m-698 -73 c0 -28 10 -54 36 -92 46 -69 89 -153 103 -204 11 -40 -1 -893 -17 -1228 l-7 -138 -65 -23 c-36 -12 -80 -30 -98 -40 l-34 -17 -66 63 c-244 230 -761 730 -829 801 -45 46 -89 100 -99 118 -10 19 -28 84 -40 144 -20 98 -26 113 -55 137 l-31 26 43 32 c273 198 643 359 1004 435 155 33 155 33 155 -14z m970 2 c216 -47 480 -146 684 -257 66 -36 235 -144 311 -198 6 -4 -4 -21 -23 -41 -17 -18 -32 -42 -32 -52 0 -39 -51 -211 -75 -251 -13 -22 -63 -78 -111 -124 -48 -45 -236 -225 -418 -399 -182 -174 -359 -342 -393 -374 l-61 -58 -59 29 c-32 16 -74 34 -94 41 l-36 12 -6 148 c-14 327 -20 1185 -9 1239 8 35 32 83 76 148 58 87 63 99 59 136 l-6 39 39 -6 c21 -4 91 -18 154 -32z m-244 -56 c3 -3 -14 -37 -39 -74 -93 -142 -91 -115 -76 -876 6 -345 9 -630 6 -633 -3 -3 -29 2 -58 10 -61 18 -256 22 -339 6 -29 -6 -55 -8 -58 -6 -2 3 1 299 9 658 14 743 19 689 -70 837 l-49 80 57 4 c85 7 610 2 617 -6z m-1923 -444 c16 -19 15 -22 -51 -79 -116 -102 -261 -245 -350 -347 l-86 -98 -30 30 -29 30 26 34 c53 70 216 244 289 309 186 166 188 167 231 121z m3311 -52 c101 -88 261 -249 351 -354 l58 -68 -30 -31 -31 -31 -33 39 c-48 58 -388 396 -434 432 l-39 32 29 30 c16 16 31 30 33 30 2 0 45 -36 96 -79z m-3259 -102 c14 -72 26 -103 57 -149 36 -55 265 -282 771 -765 108 -104 197 -190 197 -191 0 -1 -30 -19 -66 -40 -70 -41 -188 -157 -241 -238 l-31 -46 -288 303 c-658 689 -647 680 -816 721 l-87 21 115 127 c104 115 349 348 365 348 4 0 14 -41 24 -91z m3275 -86 c161 -155 295 -301 286 -310 -3 -3 -43 -13 -90 -23 -46 -9 -106 -29 -133 -45 -53 -30 -200 -176 -662 -658 -167 -174 -308 -317 -312 -317 -5 0 -9 6 -9 13 0 44 -150 210 -257 284 l-54 37 58 56 c52 51 655 629 824 790 78 74 119 150 145 267 14 64 18 72 34 63 9 -5 86 -76 170 -157z m-3739 -343 c144 -31 195 -56 263 -124 50 -50 537 -557 809 -842 l68 -72 -24 -48 c-13 -27 -32 -72 -42 -100 l-18 -52 -356 -8 c-471 -10 -987 -11 -1032 -1 -20 4 -82 37 -137 72 -82 53 -109 65 -141 65 -23 0 -41 3 -41 6 0 23 46 227 71 313 73 253 193 514 339 735 l92 138 33 -32 c26 -25 50 -35 116 -50z m4220 -52 c96 -147 207 -365 270 -530 49 -127 120 -382 133 -480 l7 -48 -48 0 c-39 0 -59 -7 -100 -35 -73 -49 -161 -92 -211 -103 -26 -6 -191 -7 -440 -2 -779 17 -922 22 -922 34 0 6 -15 45 -33 87 l-34 76 191 199 c462 483 719 744 768 777 44 30 73 41 163 58 91 18 115 27 140 50 16 16 32 29 36 29 3 0 39 -51 80 -112z m-2068 -562 c198 -38 330 -109 477 -256 110 -110 150 -167 205 -297 48 -110 67 -215 67 -358 -1 -352 -197 -661 -516 -814 -152 -73 -211 -86 -401 -86 -136 0 -172 4 -238 23 -159 46 -274 111 -395 226 -120 114 -203 256 -254 433 -32 111 -32 341 0 458 97 352 385 615 739 675 79 13 236 11 316 -4z m2494 -540 c0 0 6 -77 12 -171 9 -152 0 -480 -14 -522 -3 -8 -21 -13 -42 -13 l-38 0 0 360 0 361 40 -7 c22 -3 41 -7 42 -8z m-5242 -351 l0 -355 -38 0 c-21 0 -40 6 -42 13 -20 52 -20 630 0 685 2 7 21 12 42 12 l38 0 0 -355z m118 293 c111 -76 120 -77 482 -77 176 0 480 4 675 9 195 5 356 7 357 6 2 -2 -4 -23 -14 -47 -13 -34 -17 -76 -17 -189 0 -80 5 -164 11 -187 l11 -43 -57 0 c-31 0 -220 5 -421 10 -201 5 -478 10 -615 12 l-250 3 -75 -37 c-41 -20 -94 -48 -117 -62 l-42 -27 -7 38 c-5 21 -8 162 -8 313 1 247 5 320 20 320 3 0 33 -19 67 -42z m5003 20 c11 -34 10 -610 -2 -630 -8 -15 -19 -11 -93 37 -45 30 -99 58 -119 62 -48 10 -450 10 -968 0 l-411 -8 19 73 c16 61 19 94 14 198 -3 69 -10 142 -15 163 l-9 38 56 -5 c32 -3 325 -11 652 -17 466 -9 605 -9 640 1 47 13 135 55 185 89 38 26 42 26 51 -1z m-214 -569 c20 -5 77 -36 127 -69 84 -55 96 -60 147 -60 l55 0 -7 -37 c-72 -414 -205 -752 -427 -1085 l-72 -107 -35 33 c-28 27 -51 37 -115 51 -140 30 -183 51 -264 129 -40 39 -222 226 -404 416 -182 190 -364 380 -405 422 l-75 77 30 68 c18 37 37 87 44 110 l12 41 111 6 c169 10 1049 24 1151 19 50 -3 106 -9 127 -14z m-3882 1 c592 -12 619 -14 627 -38 3 -9 21 -53 40 -97 19 -44 37 -87 40 -96 3 -11 -113 -138 -360 -395 -451 -469 -564 -580 -619 -603 -24 -10 -86 -27 -138 -36 -87 -17 -97 -21 -129 -57 -25 -28 -37 -35 -47 -27 -7 5 -49 66 -94 134 -140 214 -271 503 -334 735 -33 121 -66 284 -66 322 0 29 1 30 36 24 30 -6 44 -1 97 32 71 45 160 91 197 103 36 11 152 11 750 -1z m852 -425 c31 -34 92 -89 134 -121 l76 -58 -104 -101 c-57 -55 -255 -246 -440 -424 -432 -413 -420 -400 -458 -517 -16 -52 -30 -103 -30 -114 0 -10 -4 -21 -8 -24 -20 -12 -493 456 -477 472 2 3 46 13 97 23 72 15 105 28 146 56 50 34 386 374 788 795 l168 178 25 -51 c14 -28 51 -79 83 -114z m1951 -267 c565 -591 537 -567 705 -607 40 -9 73 -21 73 -27 -1 -30 -454 -485 -469 -469 -2 2 -13 46 -23 97 -15 72 -28 105 -56 146 -34 50 -341 353 -785 777 l-187 178 49 24 c63 31 176 136 241 224 29 38 53 69 54 69 2 0 180 -186 398 -412z m-373 -306 c479 -460 575 -559 600 -615 9 -23 25 -85 35 -137 15 -87 20 -98 52 -126 l36 -31 -64 -46 c-207 -146 -455 -269 -719 -356 -98 -31 -270 -74 -350 -86 -25 -3 -53 -9 -62 -11 -16 -5 -18 2 -18 50 0 49 -5 64 -46 126 -49 76 -83 147 -94 196 -7 29 0 521 15 1086 l7 256 72 27 c39 14 82 32 96 40 14 8 27 14 30 15 3 0 188 -175 410 -388z m-1247 348 c37 -16 73 -30 81 -30 18 0 24 -103 31 -545 10 -547 9 -798 -2 -843 -6 -24 -39 -85 -72 -136 -55 -83 -61 -97 -61 -144 0 -63 7 -62 -162 -26 -235 49 -526 159 -733 275 -105 60 -285 178 -285 188 0 4 16 22 35 41 26 25 37 47 45 89 14 68 47 175 65 212 21 39 960 948 981 949 6 0 41 -13 77 -30z m205 -66 c44 -13 84 -15 201 -11 80 3 159 9 174 13 l28 7 -5 -59 c-3 -33 -11 -327 -17 -655 -9 -480 -9 -603 1 -635 14 -44 69 -153 100 -200 l21 -32 -118 -7 c-120 -8 -550 -2 -559 8 -3 2 17 39 45 81 27 42 56 93 63 114 16 44 17 356 5 980 -5 226 -5 412 -2 412 4 0 32 -7 63 -16z m-1780 -729 c89 -98 235 -242 362 -353 l35 -31 -30 -30 -30 -31 -85 72 c-103 86 -274 258 -353 356 l-59 71 22 31 c12 16 25 30 29 30 4 0 53 -52 109 -115z m4055 77 l27 -28 -76 -89 c-42 -50 -97 -112 -123 -139 -57 -61 -290 -266 -302 -266 -4 0 -21 11 -36 24 l-28 25 70 63 c121 108 254 240 343 341 48 53 89 97 92 97 4 0 18 -13 33 -28z m-2220 -968 c122 -3 276 -1 342 4 66 5 122 8 123 6 2 -1 1 -21 -3 -43 l-7 -40 -66 -7 c-89 -11 -445 -11 -554 -1 l-88 9 0 45 c0 37 3 44 15 39 9 -3 116 -8 238 -12z"/> <path class="cre1" d="M5685 6429 c-148 -23 -258 -80 -370 -193 -87 -88 -140 -179 -170 -291 -21 -79 -21 -241 0 -320 89 -337 420 -548 755 -481 199 40 374 173 459 348 54 112 74 207 68 323 -18 335 -275 595 -612 619 -38 2 -97 0 -130 -5z m75 -173 l0 -134 -50 -11 c-55 -12 -104 -34 -133 -59 -17 -15 -24 -9 -112 78 -52 52 -95 98 -95 102 0 11 115 87 167 109 52 23 151 47 196 48 l27 1 0 -134z m164 114 c86 -22 178 -67 231 -114 l36 -31 -94 -93 -94 -94 -54 30 c-30 17 -75 36 -101 43 l-48 11 0 134 c0 156 -9 148 124 114z m-492 -267 c49 -48 88 -91 88 -95 0 -4 -13 -28 -30 -54 -16 -26 -34 -71 -40 -101 l-12 -54 -131 3 -132 3 2 50 c2 28 13 81 25 119 22 72 110 216 131 216 6 0 51 -39 99 -87z m827 50 c62 -75 121 -229 121 -315 l0 -39 -131 3 -132 3 -14 55 c-7 30 -26 75 -42 100 l-28 45 91 93 c50 50 94 92 98 92 3 0 20 -16 37 -37z m-363 -102 c134 -60 202 -211 160 -356 -24 -81 -106 -163 -190 -189 -239 -75 -457 170 -353 396 67 147 237 213 383 149z m-452 -307 c3 -9 6 -24 6 -34 0 -10 16 -49 35 -86 l36 -68 -93 -93 -93 -94 -33 38 c-47 55 -100 167 -117 248 -24 114 -34 105 119 105 113 0 135 -2 140 -16z m933 -41 c-9 -87 -44 -177 -100 -260 l-50 -75 -97 97 -98 97 29 47 c16 25 34 70 41 99 l13 52 134 0 134 0 -6 -57z m-736 -225 c20 -9 55 -20 78 -24 l41 -7 0 -133 0 -134 -32 0 c-92 1 -250 63 -329 130 l-34 29 95 95 94 96 26 -17 c14 -9 41 -25 61 -35z m456 -40 c51 -51 93 -96 93 -100 0 -3 -33 -29 -74 -56 -83 -55 -172 -90 -258 -99 l-58 -6 0 134 0 134 52 13 c29 7 73 25 98 41 25 16 47 30 50 30 2 1 46 -41 97 -91z"/> </g> </svg> <!-- <image src="steeringwheel.svg" alt="steering wheel" height ="600px" width = "600px" style="display : block; margin-left : auto; margin-right : auto;z-index : 5;" /> --> </div> <div class="oncontainer"> <button id="spin">Make your wish</button> <div class="container"> <div class="animation" id="ani1"></div> <div class="primal" id="p1"> <div class="second"><span class="one">1</span></div> </div> <div class="primal" id="p2"> <div class="second"><span class="two">2</span></div> </div> <div class="primal" id="p3"> <div class="second"><span class="three">3</span></div> </div> <div class="primal" id="p4"> <div class="second"><span class="four">4</span></div> </div> <div class="primal" id="p5"> <div class="second"><span class="five">5</span></div> </div> <div class="primal" id="p6"> <div class="second"><span class="six">6</span></div> </div> <div class="primal" id="p7"> <div class="second"><span class="seven">7</span></div> </div> <div class="primal" id="p8"> <div class="second"><span class="eight">8</span></div> </div> </div> </div> <footer> <div id="foot1"></div> </footer> <script type="text/javascript" src="Generator.js"></script> </body> </html>
le css
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225 * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { background: #101e2b; overflow-x: hidden; margin: 0; padding: 0; } body #gen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body #gen h1 { z-index: 1; color: #ffffff; position: absolute; top: 100px; } body .oncontainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: calc(100vh*2); } body .container { width: 325px; height: 325px; background-color: #ccc; border-radius: 50%; border: 15px solid #dde; position: relative; overflow: hidden; -webkit-transition: all 1s ease; transition: all 1s ease; } body .primal { height: 50%; width: 126px; -webkit-clip-path: polygon(100% 0, 50% 100%, 0 0); clip-path: polygon(100% 0, 50% 100%, 0 0); -webkit-transform-origin: bottom; transform-origin: bottom; background: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; margin: 0; left: 84.82px; } body .second { margin-top: 3px; width: 115px; height: 170px; background: purple; -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-transform-origin: bottom; transform-origin: bottom; font-size: 12px; font-weight: bold; font-family: sans-serif; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; line-height: 9; } body #p1 { left: 50%; } body #p2 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } body #p3 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } body #p4 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } body #p5 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } body #p6 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } body #p7 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } body #p8 { -webkit-transform: rotate(315deg); transform: rotate(315deg); } body #spin { z-index: 2; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #e2e2e2; text-transform: uppercase; border: 8px solid #fff; font-weight: bold; font-size: 13px; color: #a2a2a2; width: 150px; height: 150px; font-family: sans-serif; border-radius: 50%; cursor: pointer; outline: none; letter-spacing: 1px; } body .animation { -webkit-animation: spin 1s; animation: spin 1s; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } body #foot1 { position: absolute; top: 1000px; left: 0; width: 100vw; height: 380px; background: black; } body .cre { position: absolute; left: 50%; top: calc(50vh*2); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body #image0 { -webkit-transition: 1s; transition: 1s; } @-webkit-keyframes JSS { 0% { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } 100% { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes JSS { 0% { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } 100% { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } }
Le Js :
Code JavaScript : 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 var container = document.querySelector(".container"); var btnSpin = document.getElementById("spin"); var Ani = document.getElementsByClassName("animation"); var Ani1 = document.getElementById("ani1"); var image = document.getElementById("image0"); var number = Math.floor((Math.random()*1000)); btnSpin.onclick = changeCount; var storedCount = getStoredCount(); var count = (storedCount != 0) ? storedCount : 3; function changeCount() { if (count > 0) { count--; storeCount(); console.log({count}) } if (count == 0) { btnSpin.disabled = true; } if ( number <= 500) { var tab = ["" , "", ""]; var rdm = Math.floor(Math.random() * tab.length); container.style.transform = "rotate(1080deg)"; image.style.transform = "rotate(1080deg)"; setTimeout(function(){ // window.location.href = tab[rdm]; //alert(tab[rdm]); } , 1000); } else if (number > 500 && number < 700) { container.style.transform = "rotate(1035deg)"; image.style.transform = "rotate(1035deg)"; } else if (number > 700 && number < 850) { container.style.transform = "rotate(990deg)"; image.style.transform = "rotate(990deg)"; } else if (number > 850 && number < 950) { container.style.transform = "rotate(945deg)"; image.style.transform = "rotate(945deg)"; } else if (number > 950 && number < 1000) { container.style.transform = "rotate(900deg)"; image.style.transform = "rotate(900deg)"; } else if (number > 975 && number < 1000) { container.style.transform = "rotate(855deg)"; image.style.transform = "rotate(855deg)"; } else if (number > 995 && number < 1000) { container.style.transform = "rotate(810deg)"; image.style.transform = "rotate(810deg)"; } else { container.style.transform = "rotate(765deg)"; image.style.transform = "rotate(765deg)"; } number = Math.floor((Math.random()*1000)); console.log("new number " + number.toFixed(0)); container.classList.remove('animation'); setTimeout(function(){ container.classList.add('animation'); } , 0001); image.classList.remove('animation'); setTimeout(function(){ image.classList.add('animation'); } , 0001); } function getStoredCount() { // returns 0 if not set (value: null) return localStorage.getItem(count) || 0; } function storeCount() { localStorage.setItem('count', count); }
Mon but était de faire une roue avec un % de chance de tomber sur les nombres 1 , 2 , 3 etc tout fonctionne sauf que je voulais imposer une limite ou l'on ne peut tourner seulement trois fois la roue.
Cette limite ne peut etre imposer puisque quand la page se réacctualise on peut encore tourner 3 fois , comment faire ?
Partager