老師上課點名JS程序，簡單！
老师上课点名纯js
<!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>點擊查看更多內容
6人點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦