Question

我知道这个问题可以通过多种方式回答，但我需要有人为我完成。我希望动画完成任务，然后弹出一个随机数？现在，我一键即可实现2个功能（我需要）。我是新来的，一个简单的公式就很棒！任何人都可以帮忙，如果可以的话，我们将不胜感激！谢谢！这就是代码！

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>

Answer 1

还有很多更优雅的方法，但这是纠正错误的方法：

setTimeout(function(){  
    setRandom('random')
}, 6000);

Answer 2

您的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>

希望这会有所帮助

如何设置功能延迟？

2 个答案: