<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点名</title>
<style>
#box{
display: block;
overflow: hidden;
height: auto;
width: 20%;
background: pink;
}
div{
border: 1px gray solid;
}
</style>
</head>
<body>
<div id="box" align="center">
<table cellpadding="10px">
<tr>
<td><div>张飞</div></td>
<td><div>刘备</div></td>
<td><div>盖伦</div></td>
<td><div>武器</div></td>
<td><div>拉克丝</div></td>
<td><div>小法</div></td>
</tr>
<tr>
<td><div>张飞</div></td>
<td><div>刘备</div></td>
<td><div>盖伦</div></td>
<td><div>武器</div></td>
<td><div>拉克丝</div></td>
<td><div>小法</div></td>
</tr>
<tr>
<td><div>张飞</div></td>
<td><div>刘备</div></td>
<td><div>盖伦</div></td>
<td><div>武器</div></td>
<td><div>拉克丝</div></td>
<td><div>小法</div></td>
</tr>
</table>
<button type="button" id="btn">开始点名</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
// 随机数函数
function random(min, max) {
return parseInt((max - min) * Math.random());
}
var oDivs = box.getElementsByTagName("div");
var times = 0; //声明初始次数
btn.onclick = function() {
var timer = setInterval(function() { //开启定时器
times++;
for (var i = 0; i < oDivs.length; i++) { //让除指定下标的div背景色发生改变，其他都为空
oDivs[i].style.background = "";
}
var index = random(0, oDivs.length - 1); //获取div的随机下标
oDivs[index].style.background = "green";
if (times > 15) { //跳15次停止
clearInterval(timer); //清除定时器
times = 0; //初始化次数
return;
}
}, 100);
}
</script>
</body>
</html>继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付
老师上课点名JS程序，简单！
2017-08-01 15:36:37
浏览 5884
老师上课点名纯js
- 相关标签
- JQuery
- JavaScript
随时随地看视频慕课网APP
相关课程
