老師上課點(diǎn)名JS程序,簡(jiǎn)單!
老师上课点名纯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>
點(diǎn)擊查看更多內(nèi)容
6人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)