当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现随机点名系统(实例讲解)

js实现随机点名系统(实例讲解)

2017年12月12日  | 移动技术网IT编程  | 我要评论

废话不多说，直接上代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>随机点名</title>
<style type="text/css">
td{
text-align: center;
}
</style>
</head>
<body>
<table width="760" border="1" height="460" align="center">
<h1 align="center">随机点名系统</h1>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div align="center">
<br/>
<br/>
<input type="button" value="随机抽取" onclick="selectrandom();"/>
<input type="button" value="打乱顺序" onclick="upsetorder();"/>
<br/>
<br/>
<input type="button" value="快速抽取" onclick="quickextr();"/>
<input type="button" value="停止抽取" onclick="stopextr();"/>
</div>
<script type="text/javascript">
var classmate = ["周远康","刘婷婷","戴娜","范凯","向彬",
"胡波","胡辉","黄缘平","刘云","刘嘉鑫",
"赵福全","王小妹","苏伟","李辉","曾伟",
"李佳晓","钟仕文","张志强","袁鑫豪","余日成",
"付立金","彭福康","邓慧佳","曹蓉","刘未东",
"桂义","彭俊斌","周康华","曹增","蒋煜"];
//定义一个变量存随机数组
var indexarr;
//打乱顺序
function upsetorder(){
alert(1);
//初始化数组
indexarr = [];
//获取新的随机数
var rd = parseint(math.random()*classmate.length);
while(true){
do{
var falg = true;
//循环获得每一个下标
for (var i = 0 ; i <classmate.length ; i++) {
//判断是否已存在这个下标,是否为重复之后 跳出
if(indexarr[i] == rd){
falg = false;
break;
}
}
//判断是否添加
if(falg){
indexarr.push(rd);
}
rd = parseint(math.random()*classmate.length);
}while (falg);
if(indexarr.length == classmate.length){
break;
}
}
}
//随机抽取
function selectrandom(){
var alltd = document.getelementsbytagname("td");
for (var i = 0; i < classmate.length; i++) {
alltd[i].innerhtml = classmate[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 quickextr(){
if(interid){
return;
}
//把所有的td还原为最初
interid = setinterval(function(){
for (var i = 0; i < classmate.length; i++) {
alltd[i].style.color = "#ff6633";
alltd[i].style.background = "#ff6633";
}
for (var i = 0; i < mychecked.length; i++) {
alltd[mychecked[i]].style.color = "#ff6633";
alltd[mychecked[i]].style.background = "white";
}
alltd[count%classmate.length].style.color = "white";
alltd[count%classmate.length].style.background = "white";
count++;
},1);
}
//停止抽取
function stopextr(){
clearinterval(interid);
interid = undefined;
var checkids = count%classmate.length==0?classmate.length-1:(count%classmate.length)-1;
alltd[checkids].style.color = "#ff6633";
mychecked.push(checkids);
}
</script>
</body>
</html>

以上这篇js实现随机点名系统(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网