<分区>
标签 javascript html css
<分区>
我知道如何随机化 1 到 100 之类的数字,但不知道如何随机化某些数字。就像我只想要 1、15 等。我环顾四周,它太困惑了。有更简单的方法吗?谢谢!
function getRandom() {
return Math.random()1, 15, 30, 45;
}
所有代码(它有一个动画,我想要一个随机(特定)数字出现在动画之后的框中
<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>
<style>
.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"></div>
<button onclick="startbtn()">Start</button>
<button onclick="refresh()">Reset</button>
<button onclick="getRandom()">Number</button>
<p id="getRandom()"></p>
<script>
startbtn = function() {
$('.wheel').addClass('animated-wheel');
}
function refresh() {
location.reload();
};
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
</script>
</body>
</html>
最佳答案
您可以移动数组中的数字并返回具有随机索引的选择。
为了在动画之后获取一个值,您可以使用超时延迟数字的绘制,然后将该值添加到标签中。
function startbtn () {
$('.wheel').addClass('animated-wheel');
setTimeout(() => document.getElementById('random').innerHTML = getRandom(), 8000);
}
function refresh() {
location.reload();
}
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
.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>
<body bgcolor="orange">
<div class="wheel"></div>
<button onclick="startbtn()">Start</button>
<button onclick="refresh()">Reset</button>
<button onclick="getRandom()">Number</button>
<p id="random"></p>
</body>
关于javascript - 你如何随机化某些数字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55200083/
相关文章:
javascript - 如何访问javascript中的文档
javascript - 未定义数据的语义 UI + React 问题
javascript - 流体模板: passing a javascript varible as the argument value?
javascript - 鼠标悬停事件不会在 IE9 上针对子元素进行细化,事件不会在 IE8 上启动
javascript - 从 Django 模型获取数据到 Google Charts
html - <img> 如何缩放到 sibling 的高度?