初学JavaScript之利用计时器和随机数做出的小例子
Posted qjdxb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学JavaScript之利用计时器和随机数做出的小例子相关的知识，希望对你有一定的参考价值。
/*点击开始按钮，小圆球随机取数；点击暂停按钮，取数结束*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摇摇乐</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
color: #FFFFFF;
}
input{
width: 100px;
height: 50px;
background: red;
}
ul{
overflow: hidden;
}
ul li{
list-style: none;
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
margin: 5px;
text-align: center;
line-height: 50px;
}
ul li:nth-of-type(6),ul li:nth-of-type(7){
background: blue;
}
</style>
</head>
<body>
<input type="button" name="start" id="start" value="开始" />
<input type="button" name="stop" id="stop" value="暂停" />
<ul id="balls">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var start = document.querySelector("#start");
var stop = document.querySelector("#stop");
var balls = document.querySelector("#balls").querySelectorAll("li");
var click = true;
start.onclick = function(){
if(click){
timer = setInterval(function(){
//前五个小圆球1-30之间随机
for(var i = 0; i<5;i++){
balls[i].innerText= Math.floor(Math.random()*(30-1+1)+1);;
}
//后两个小圆球1-12之间随机
for(var i = 5; i<=6;i++){
balls[i].innerText= Math.floor(Math.random()*(12-1+1)+1);
}
},30)
click = false;
}
}
stop.onclick = function(){
clearInterval(timer);
click = true;
}
</script>
</html>
以上是关于初学JavaScript之利用计时器和随机数做出的小例子的主要内容，如果未能解决你的问题，请参考以下文章
Android之利用JSBridge库实现Html，JavaScript与Android的所有交互
javaScript 利用随机数和定时器完成几个有用的文字小操作 文字的滚动效果，文字的打印效果和文字的颜色闪烁
初学javascript，要求编写一个倒计时，格式如00:00:00该怎么实现？时间是自己设定，想设置多少秒就多少秒