JS实现随机点名

最新推荐文章于 2023-11-16 23:59:17 发布

Foryourfuture

最新推荐文章于 2023-11-16 23:59:17 发布

阅读量781

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_36190858/article/details/78087747

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>

Foryourfuture

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现随机点名

<!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...
复制链接

扫一扫