<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>隨機點名</title> <style type="text/css"> td{ text-align: center; } </style></head><bod ...
<!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>
