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)(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文為大家提供一段加入收藏的js代碼以及實用Jquery更改對象透明度的代碼，需要的朋友可以參考下2014-01-01
這篇文章主要為大家介紹了微信APP生命周期及頁面生命周期當然示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要為大家詳細介紹了JS如何利用原生canvas實現(xiàn)圖形標注功能,支持矩形、多邊形、線段、圓形等已繪制的圖形進行縮放,移動,需要的可以參考下2024-03-03
javascript實現(xiàn)鼠標點擊頁面 移動DIV
本篇文章主要介紹javascript實現(xiàn)鼠標點擊頁面，移動DIV。話不多說，附上代碼實例。需要的朋友來看下吧2016-12-12
本文主要給大家介紹了javascript中的scrollTop方法，以及scrollTop在各大瀏覽器的兼容性情況的詳細測試，十分的細致全面，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
相信大家都知道網(wǎng)上關于Javascript中數(shù)組去重的方法很多，這篇文章給大家總結Javascript中數(shù)組各種去重的方法，相信本文對大家學習和使用Javascript具有一定的參考借鑒價值，有需要的下面來一起看看。2016-10-10
?javascript數(shù)組中的lastIndexOf方法
這篇文章主要介紹了?javascript數(shù)組中的lastIndexOf方法,該方法可返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索，下文詳細內容需要的小伙伴可以參考一下2022-03-03
在平時前端開發(fā)中,我們不難發(fā)現(xiàn)經常會用到字符串操作,這篇文章主要給大家介紹了關于vue(javaScript)操作字符串的一些常用方法的相關資料,需要的朋友可以參考下2024-01-01
uni-app多環(huán)境配置實現(xiàn)自動部署的方式詳解
前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關于uni-app多環(huán)境配置實現(xiàn)自動部署的相關資料,需要的朋友可以參考下
2022-06-06