Je sais que cette question peut être répondue de plusieurs manières, mais j'ai besoin que quelqu'un le fasse pour moi. Je veux que mon animation fasse son travail et qu'un nombre aléatoire apparaisse ? En ce moment j'ai 2 fonctions en un clic (j'en ai besoin). Je suis nouveau dans ce domaine et une formule simple serait géniale! Quelqu'un peut-il aider, si vous le pouvez, ce serait apprécié! Merci! C'EST TOUT LE CODE !

startbtn = function() {
  $('.wheel').addClass('animated-wheel');
  setTimeout(setRandom('random') {}, 6000);
}

function getRandom() {
  var values = [1, 15, 30, 45];
  return values[Math.floor(Math.random() * values.length)];
}

function setRandom(id) {
  document.getElementById(id).innerHTML = getRandom();
}

function refresh() {
  location.reload();
};
.number {
  text-align: center;
  color: white;
  font-size: 78px;
}

.wheel {
  width: 200px;
  height: 100px;
  left: 600px;
  top: 300px;
  background: green;
  position: relative;
}

.animated-wheel {
  -webkit-animation: myfirst4s 2;
  -webkit-animation-direction: alternate;
  animation: myfirst 4s 2;
  animation-direction: alternate;
}

@-webkit-keyframes myfirst {
  0% {
    background: green;
    left: 600px;
    top: 300px;
  }
  33% {
    background: black;
    left: 600px;
    top: 0px;
  }
  66% {
    background: red;
    left: 600px;
    top: 650px;
  }
  100% {
    background: black;
    left: 600px;
    top: 0px;
  }
}

@keyframes myfirst {
  0% {
    background: green;
    left: 600px;
    top: 300px;
  }
  33% {
    background: green;
    left: 600px;
    top: 300px;
  }
  66% {
    background: black;
    left: 600px;
    top: 0px;
  }
  100% {
    background: red;
    left: 600px;
    top: 650px;
  }
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>

<head></head>
<title>The Wheel!</title>

<body bgcolor="orange">

  <head>

  </head>
  <div class="wheel">
    <h1 class="number" id="random"></h1>
  </div>
  <button onclick="startbtn();setRandom('random');">Start</button>
  <button onclick="refresh()">Reset</button>






</body>

</html>
1
Easton Antony 16 mars 2019 à 23:06

2 réponses

Meilleure réponse

Vous avez eu une erreur de syntaxe dans votre setTimeout() :

startbtn = function() {
  $('.wheel').addClass('animated-wheel');
  setTimeout(function() {
    // Remove animation class
    setRandom('random');
    $('.wheel').removeClass('animated-wheel');
  }, 6750);
}


function getRandom() {
  var values = [1, 15, 30, 45];
  return values[Math.floor(Math.random() * values.length)];
}

function setRandom(id) {
  document.getElementById(id).innerText = getRandom();
}

function refresh() {
  location.reload();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head></head>
<title>The Wheel!</title>

<body bgcolor="orange">

  <head>
    <style>
      .number {
        text-align: center;
        color: white;
        font-size: 78px;
      }
      
      .wheel {
        width: 200px;
        height: 100px;
        left: 600px;
        top: 300px;
        background: green;
        position: relative;
      }
      
      .animated-wheel {
        -webkit-animation: myfirst4s 2;
        -webkit-animation-direction: alternate;
        animation: myfirst 4s 2;
        animation-direction: alternate;
      }
      
      @-webkit-keyframes myfirst {
        0% {
          background: green;
          left: 600px;
          top: 300px;
        }
        33% {
          background: black;
          left: 600px;
          top: 0px;
        }
        66% {
          background: red;
          left: 600px;
          top: 650px;
        }
        100% {
          background: black;
          left: 600px;
          top: 0px;
        }
      }
      
      @keyframes myfirst {
        0% {
          background: green;
          left: 600px;
          top: 300px;
        }
        33% {
          background: green;
          left: 600px;
          top: 300px;
        }
        66% {
          background: black;
          left: 600px;
          top: 0px;
        }
        100% {
          background: red;
          left: 600px;
          top: 650px;
        }
      }
    </style>
  </head>
  <div class="wheel">
    <h1 class="number" id="random"></h1>
  </div>
  <button onclick="startbtn();">Start</button>
  <button onclick="refresh()">Reset</button>
</body>

</html>

J'espère que cela t'aides,

3
Miroslav Glamuzina 17 mars 2019 à 02:37

Il y a des tonnes de manière plus élégante mais voici la correction de votre erreur :

setTimeout(function(){  
    setRandom('random')
}, 6000);
3
ibrahimyilmaz 16 mars 2019 à 20:14