js實現(xiàn)隨機點名系統(tǒng)(實例講解)

更新時間：2017年10月18日 09:08:43 作者：落瞳不是無情物

下面小編就為大家?guī)硪黄猨s實現(xiàn)隨機點名系統(tǒng)(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

廢話不多說，直接上代碼：

<!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">隨機點名系統(tǒng)</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 = ["周遠康","劉婷婷","戴娜","范凱","向彬",
"胡波","胡輝","黃緣平","劉云","劉嘉鑫",
"趙福全","王小妹","蘇偉","李輝","曾偉",
"李佳曉","鐘仕文","張志強","袁鑫豪","余日成",
"付立金","彭?？?,"鄧慧佳","曹蓉","劉未東",
"桂義","彭俊斌","周康華","曹增","蔣煜"];
//定義一個變量存隨機數(shù)組
var indexArr;
//打亂順序
function Upsetorder(){
alert(1);
//初始化數(shù)組
indexArr = [];
//獲取新的隨機數(shù)
var rd = parseInt(Math.random()*classMate.length);
while(true){
do{
var falg = true;
//循環(huán)獲得每一個下標
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實現(xiàn)隨機點名系統(tǒng)(實例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: