Partage
  • Partager sur Facebook
  • Partager sur Twitter

Impossible de stocker un nombre avec localStorage

Problème lors du stockage d'un nombre avec localStorage

DavidJambonstrowski
    19 septembre 2021 à 16:30:07

    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...

    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 getStoredCount() {
        if (count == 0) {
          storeCount();
            btnSpin.disabled = true;
         }

        return  localStorage.getItem(count) || 0;

      }
      function storeCount() {
        localStorage.setItem('count', count);
      }

     function changeCount() {

       if (count > 0) {
         count--;
         console.log({count})
       } 



       if ( number <= 500) {
        var tab = ["https://www.youtube.com/watch?v=hEaYJ_OABI" , "https://www.youtube.com/watch?v=_q5wUh0D5o", "https://www.youtube.com/watch?v=bi3lqLuCw"]; 
        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); 
     }

    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 ? 

    Au passage Je ne sais pour quelle raison mais quand j'essaye de mettre tout ça dans la balise <code></code> en éditant  sur  Openclassroom ça n'actualise je ne sais pas si c'est une extension ou autre donc désolé si la mise en forme est pas très propre... 

    Au passage le Html ducoup : 

    <?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>

    Et le CSS : 

    * {
      -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);
      }
    }

    -
    Edité par DavidJambonstrowski 19 septembre 2021 à 16:39:06

    • Partager sur Facebook
    • Partager sur Twitter
    piero5673
      19 septembre 2021 à 19:33:24

      Bonjour,

      Il faut stocker le nombre de fois où un utilisateur à tourné la roue sur ton serveur. Si tu stocke ça sur le client, rien n'empêche le client de "tricher".

      • Partager sur Facebook
      • Partager sur Twitter
      DavidJambonstrowski
        19 septembre 2021 à 20:06:17

        piero5673 a écrit:

        Bonjour,

        Il faut stocker le nombre de fois où un utilisateur à tourné la roue sur ton serveur. Si tu stocke ça sur le client, rien n'empêche le client de "tricher".


        Ok ok Merci beaucoup ! Serveur c'est a dire en effectuant une requête XMLHtpp ou en utilisant Ajax JQuery ? Ou je dois utiliser Php avec les cookies etc pour le faire ?

        Oui rien n'empêche Si c'est pas avec le serveur en gros peut importe même si j'actualise la page le nombre 0 ne sera pas stocké et ça ne marchera pas ? o_O

        -
        Edité par DavidJambonstrowski 19 septembre 2021 à 20:21:43

        • Partager sur Facebook
        • Partager sur Twitter
        piero5673
          20 septembre 2021 à 13:40:30

          Tout ce que tu stocke sur le client peut être modifié par l'utilisateur (que ce soit sur le local storage ou dans les cookies, même le code). Si tu veux sécuriser ton décompte, il faut le mettre côté backend, dans une db par exemple. Comme le résultat peut être modifié également, une solution serais de faire une requête http (utilise la méthode avec laquelle tu es le plus à l'aise, que ce soit du Jquery, du XMLHttp ou autre ça ne change rien) qui nécessite une authentification et qui renvoie le résultat au client.
          • Partager sur Facebook
          • Partager sur Twitter
          DavidJambonstrowski
            20 septembre 2021 à 21:49:13

            D'accord merci beaucoup pour l'info ^^ 

            ça a fini par le stocker mais bon on peut changer la valeur donc j'utiliserai une db comme vous dites 

            • Partager sur Facebook
            • Partager sur Twitter

            Impossible de stocker un nombre avec localStorage

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur ●
            • Markdown