JS随机点名系统-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36190858/article/details/78087747

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现随机点名</title>
<style type="text/css">
td{
width:20px;
height:20px;
text-align: center;
}
</style>
</head>
<body>
<h1 align="center">随机点名</h1>
<table align="center" border="3" width="200" height="160">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table><br>
<div align="center">
<input type="button" value="随机抽取" οnclick="myShow();">
<input type="button" value="打乱排序" οnclick="myRandom();"><br><br>
<input type="button" value="快速抽取" οnclick="mySelect();">
<input type="button" value="停止抽取" οnclick="myStop();">
</div>
<script type="text/javascript">
//准备数据
var allData = ["A","B","C","D","E","F"];

//打乱排序
var indexArr;//准备保存随机下标的数组
function myRandom(){
//初始化数组
var myChecked = [];
indexArr = [];
//获得一个新的随机值
var rd = parseInt(Math.random() * allData.length);
var count = 0;

while (true) {

do{

var flag = true;

for(var i = 0; i < indexArr.length; i++){
if(indexArr[i] == rd){//说明已存在该下标
//是否为重复之后跳出
flag = false;
break;
}
}

//判断是否添加
if(flag){
indexArr.push(rd);
}

rd = parseInt(Math.random() * allData.length);

count++;

}while(flag);

if(indexArr.length === allData.length){
break;
}
/*console.log(indexArr);
console.log(count);*/
}
}

//随机抽取
function myShow(){
var allTd = document.getElementsByTagName("td");
for(var i = 0; i < allData.length; i++){
allTd[i].innerHTML = allData[indexArr[i]];
allTd[i].style.color = '#ff6633';
allTd[i].style.background = '#ff6633';
//翻牌
allTd[i].onclick = function(){
this.style.background = 'white';
}
}
}

//快速抽取
var interId;
var count = 0;
//保存已被选出的人
var myChecked = [];
var allTd = document.getElementsByTagName("td");

function mySelect(){

if(interId){
return;
}

interId = setInterval(function(){
//把所有的td还原到初始状态
for(var i = 0; i < allData.length; i++){
allTd[i].style.color = '#ff6633';
allTd[i].style.background = '#ff6633';
}
//还原已被选中的ID
for(var i = 0; i < myChecked.length; i++){
allTd[myChecked[i]].style.color = '#ff6633';
allTd[myChecked[i]].style.background = 'white';
}

allTd[count%allData.length].style.color = 'white';
allTd[count%allData.length].style.background = 'white';
count++;

},1000);
}

//停止抽取
function myStop(){
clearInterval(interId);
interId = undefined;
var checkedIds = count%allData.length==0?allData.length-1:(count%allData.length)-1;

allTd[checkedIds].style.color = '#ff6633';

myChecked.push(checkedIds);
}

</script>
</body>
</html>