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

html基础 javascript 基础 简单实现随机点名系统

2020-06-28 09:12 459 查看

随机点名系统的设计与实现

总体思路

1.创建一个父类表格table元素，给它id值
2.创建开始、停止按钮
3.创建数组，用来存放人名
4.循环遍历，将人名添加到单元格中，再将单元格对象添加到table中
5.创建开始按钮点击事件
6.创建停止按钮点击事件

代码实现

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
text-align: center;
}
</style>
</head>
<body>
<h1 >随机点名系统</h1>
<table id="tb">

</table>

<!-- 创建点名和停止按钮 -->
<input type="button" id="btn1" value="点名"/>
<input type="button" id="btn2" value="停止"/>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var arr=["肖绍霆","文鑫","向贞好","胥员员","李勇","熊明","杜凯","熊国良","付帅","龚文曦","吴世林","李鹏","宋小明","黄海","曾光鹏","墙世川","幸勇","彭清亮","杨崇鑫","王一舟","汪家鹏","高茂鑫","张松恒","杨海峰","付杨恒","唐浩翔","张攀"];
let hang=Math.ceil(arr.length/6);
let table=document.getElementById("tb");
//创建行对象
for(i=0;i<hang;i++){
let tr=document.createElement("tr");
table.appendChild(tr);
}

//创建单元格对象
let trs=document.getElementsByTagName("tr");
for(let i=0;i<arr.length;i++){
let td=document.createElement("td");
//给单元格添加信息
td.innerText=arr[i];
//将单元格添加到行对象中
if(i<6){
trs[0].appendChild(td)
}else if(i>=6&&i<12){
trs[1].appendChild(td)
}else if(i>=12&&i<18){
trs[2].appendChild(td)
}else if(i>=18&&i<24){
trs[3].appendChild(td)
}else if(i>=24&&i<30){
trs[4].appendChild(td)
};
}

var dm;
var tz;
//创建点名按钮函数
document.getElementById("btn1").οnclick=function(){
//禁用开始按钮
$("#btn1").prop("disabled",true);
//启用停止按钮
$("#btn2").prop("disabled",false);
tz=setInterval("colorClear()",300);
dm=setInterval("fun()",300);

}

//停止按钮方法
document.getElementById("btn2").οnclick=function(){
//清除定时器
$("#btn1").prop("disabled",false);
$("#btn2").prop("disabled",true);
clearInterval(tz);
clearInterval(dm);

}

var num;
function fun(){
num=Math.random()*arr.length;
let num1=Math.floor(num);
let tds=document.getElementsByTagName("td");
tds[num1].style.backgroundColor="red";

}

//    清除颜色方法
function colorClear(){
let tds=document.getElementsByTagName("td");

for(let i=0;i<arr.length;i++){
tds[i].style.backgroundColor="";
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航