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


Posted in Javascript onOctober 18, 2017

废话不多说,直接上代码:

<!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实现随机点名系统(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JavaScript 原型继承
Dec 26 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 #Javascript
详谈commonjs模块与es6模块的区别
Oct 18 #Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 #Javascript
详解http访问解析流程原理
Oct 18 #Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 #Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 #Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 #Javascript
You might like
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
工程安全员岗位职责
2014/03/09 职场文书
给市场的环保建议书
2014/05/14 职场文书
靠谱准确的求职信
2019/04/02 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS