您的位置：首页 > Web前端 > JavaScript

原生js 实现随机点名系统

2020-06-28 05:00 615 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名系统</title>

<style>
table {
margin: auto;
width: 900px;
border-spacing: 10px;
}

td {
text-align: center;
border: 1px solid;
width: 200px;
margin: 60px;
}

body {
background-color: gray;
}

caption {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
font-size: 25px;
font-weight: bold;
}

button {
font-size: 18px;
margin-top: 60px;
width: 100px;
}

div {
text-align: center;
}

#cdate {
border: #ffffff;
text-align: right;
}
</style>
</head>
<body>
<table id="tb">
<caption>随机点名系统</caption>
<tr>
<td id="cdate" colspan="9">当前时间</td>
</tr>
</table>
<br>
<div>
<button id="start">点名</button>
<button id="end">停止</button>
</div>
<br><br>

</body>

<script>
//姓名列表
let str = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19";
//每行显示个数
let rowCount=9;

let arr = str.split(",");
setInterval(function () {
document.getElementById("cdate").innerText=new Date().toLocaleString();
}, 1000);
let tr;
for (let i = 0; i < arr.length; i++) {
if (i % rowCount === 0) {
tr = document.createElement("tr");
document.getElementById("tb").appendChild(tr);
}
let td = document.createElement("td");
td.style.background = "beige";
td.innerText = arr[i];
td.setAttribute("id", i);
tr.appendChild(td);
}

let tmp = 0;
var chageBackground;

var start = document.getElementById("start");
var end = document.getElementById("end");

start.onclick=fun;

end.onclick=function () {
clearInterval(chageBackground);
//start.onclick=null;
//start.onclick=fun;

start.disabled=false;
this.disabled=true;
};

function fun() {
chageBackground = setInterval(function () {
document.getElementById(tmp).style.background = "beige";
tmp = Math.floor(Math.random() * arr.length);
document.getElementById(tmp).style.background = "red";
}, 100);
// this.onclick=null;

start.setAttribute("disabled",true);
end.disabled=false;
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航