如何将延迟设置为函数

我知道这个问题可以通过多种方式回答，但我需要有人为我做到这一点。我希望我的动画做它的事情，然后弹出一个随机数？现在，我一键有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>

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

希望这会有所帮助，

有更多优雅的方式，但这里是对您的错误的纠正：

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

相关内容

最新更新

热门标签：