名字没有数据源就使用随机生成的汉字作为名字JavaScript代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
<!-- 引入jquery文件-->
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<h1 align="center">随机点名器</h1>
<table id="tb">
<caption>学生信息表</caption>
</table>
<div align="center">
<input type="button" value="开始" id="start" >
<input type="button" value="结束" id="end" >
</div>
</body>
<script>
// 生成一个随机汉字
function getRandomChineseWord () {
var _rsl = "";
var _randomUniCode = Math.floor(Math.random() * (40870 - 19968) + 19968).toString(16);
eval("_rsl=" + '"\\u' + _randomUniCode + '"');
return _rsl;
}
let name=getRandomChineseWord();
function randomName(){
// 生成一个随机数决定名字的长度,长度为2-5
let ran=Math.random()*100
// 向下取整变为一个整数
let intrand=Math.floor(ran); // 产生的随机整数是0-99
// 对5取余
let m=intrand%5;
if(m<2){
m=m+2;
}
//生成随机长度的名字
let name="";
for(let i=0;i<m;i++){
name+= getRandomChineseWord();
}
return name;
}
let count=0;
// 生成40个块级标签
for(let j=0;j<8;j++){
// 生成tr标签
let tr= document.createElement("tr")
// 生成五个th标签
for(let i=0;i<5;i++){
count++;
let th= document.createElement("th")
// 设置th标签的id属性
th.setAttribute("id","th"+count)
// 把名字添加到th标签中
th.innerText=randomName()
// 把th标签添加到tr标签上
tr.appendChild(th)
}
// 把tr标签添加到表上
let tb=document.getElementById("tb")
tb.appendChild(tr)
}
let time;
function changeColorId(){
// 获得要设置背景颜色标签的id
// 生成1-40之间的随机数
let ran= Math.random()*41
// 向下取整
let id= Math.floor(ran)
let changeId="th"+id;
return changeId;
}
// 点击开始按钮开始定时任务
document.getElementById("start").onclick=function(){
// 设置定时任务
time= window.setInterval(function(){
// 利用jq属性选择器筛选背景是为红色的元素并移除
$("th[style='background-color:red']").removeAttr("style")
// let redTh= $("th[style:background-color :red]")
let id=changeColorId();
document.getElementById(id).setAttribute("style","background-color:red")
},10)
}
// jq引入测试
// $("#start").click(function(){
// alert("引入成功")
// })
// 点击停止结束定时任务
document.getElementById("end").onclick=function(){
window.clearInterval(time);
}
// 在点击停止以后弹出中奖的名字
$("#end").click(function(){
let target= $("th[style='background-color:red']").get(0).innerText
alert("恭喜"+target+"同学");
})
</script>
</html>