js实现随机点名系统(实例讲解)
更新时间：2017年10月18日 09:08:43 作者：落瞳不是无情物
下面小编就为大家带来一篇js实现随机点名系统(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
废话不多说，直接上代码：
<!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实现随机点名系统(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里我们给大家分享了关于JS实现十分钟倒计时的相关实例代码，有需要的朋友们可以学习下。2018-10-10
这篇文章主要为大家介绍了从延迟处理解析JavaScript惰性编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了JavaScript动态绑定，关于JavaScript中为元素绑定的事件失效的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了前端如何实现动画过渡效果，帮助大家更好的理解和学习前端开发网页，感兴趣的朋友可以了解下2021-02-02
bootstrap-paginator服务器端分页使用方法详解
这篇文章主要为大家详细介绍了bootstrap-paginator服务器端分页的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要为大家详细介绍了原生JS实现自定义滚动条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本篇文章主要介绍了"微信微信JS-SDK 6.0.2 遇到问题 "，主要涉及到微信微信JS-SDK 6.0.2 填坑笔记 方面的内容，对于微信微信JS-SDK 6.0.2 填坑笔记 感兴趣的同学可以参考一下。2016-12-12
在JavaScript中,可以使用Date.parse()或new Date()来获取指定时间的时间戳,本文给大家分享JS获取指定时间的时间戳的方法,感兴趣的朋友一起看看吧2024-01-01
在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能,下面就来介绍一下webpack5处理图片、图标字体、多媒体等静态资源文件的实现方法,感兴趣的可以了解一下2023-12-12
这篇文章主要为大家详细介绍了js实现图片上传并预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
最新评论