IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Conception Web Discussion :

LocalStorage ne stock pas un nombre


Sujet :

Conception Web

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    août 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : août 2021
    Messages : 3
    Points : 3
    Points
    3
    Par défaut LocalStorage ne stock pas un nombre
    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 ?

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 426
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 426
    Points : 13 062
    Points
    13 062
    Par défaut
    cela a l'air d'être un souci de code javascript donc, il faudrait peut-être demander à un modérateur de déplacer cette discussion.

    petite parenthèse : est ce que vous savez que le stockage local est géré par le client http ? donc par exemple dans le navigateur, il est possible d'utiliser les outils de développement pour modifier cette valeur et donc rejouer.

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    août 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : août 2021
    Messages : 3
    Points : 3
    Points
    3
    Par défaut
    Pour l'instant c'est pas si grave mais plus tard j'essayerai de stocker ça dans une db

  4. #4
    Modérateur

    Profil pro
    Inscrit en
    septembre 2004
    Messages
    12 301
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 12 301
    Points : 20 812
    Points
    20 812
    Par défaut
    Non mais de toute façon, si c'est le navigateur qui tourne la roue, alors le visiteur peut utiliser les outils pour le faire autant qu'il veut.

    Et a priori il ne se passe rien de très important quand on tourne la roue, donc "limiter à trois essais", c'est juste pour donner une impression qu'on le fait pas tant qu'on veut ? genre créer un sentiment artificiel de rareté d'opportunité, mais dont il n'est pas important que les visiteurs de niveau avancé se rendent compte qu'on peut le contourner ?

    Dans ce cas, localStorage suffira amplement.

    Et la raison pour laquelle localStorage ne fait pas ce à quoi on s'attend ici, est d'abord une question de bon sens :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var count = (storedCount != 0) ? storedCount : 3;

    Du coup si le visiteur a épuisé tous ses essais, on lui en remet 3. Bah il va se passer quoi du coup ?

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    if (count > 0) {
         // ...
         storeCount(); {
    } else {
      // pas de storeCount()
    }

    Du coup si le visiteur a épuisé tous ses essais, on l'enregistre pas. Ben donc à tout moment on pense qu'il lui reste au moins un essai !

    Bref, il y a de gros problèmes de bon sens.

    On notera quand même :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    return  localStorage.getItem(count) || 0;

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    localStorage.setItem('count', count);

    L'un des deux a des quotes autour de "count", et l'autre pas.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    août 2021
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : août 2021
    Messages : 3
    Points : 3
    Points
    3
    Par défaut
    Ok merci beaucoup pour votre réponse je vais essayer de modifier ce qui ne va pas + j'avais demandé de l'aide sur un autre forum également mais je n'ai jamais compris le principe d'utilisation du "?" ou ":" en javascript ça m'a gêné et je ne l'ai pas modifié du coup

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. erreur : " ceci n'est pas un nombre"
    Par fripette dans le forum Outils
    Réponses: 5
    Dernier message: 17/11/2013, 16h51
  2. Réponses: 6
    Dernier message: 19/03/2007, 11h09
  3. [SQL] Compter le nombre de dossiers, pas le nombre d'enregistrements
    Par lodan dans le forum PHP & Base de données
    Réponses: 10
    Dernier message: 11/01/2007, 19h42
  4. [T-SQL]Lenteur de prock stock + pas de log
    Par arona dans le forum Sybase
    Réponses: 2
    Dernier message: 15/09/2006, 11h08
  5. 50.00 n'est pas un nombre en virgule flottante correct
    Par Merfolk dans le forum C++Builder
    Réponses: 2
    Dernier message: 26/01/2006, 00h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo