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 Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
Python logging模块学习笔记
2014/05/24 Python
python黑魔法之参数传递
2016/02/12 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
高三高考决心书
2014/03/11 职场文书
大学校务公开实施方案
2014/03/31 职场文书
企业标语口号
2014/06/10 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
Python基础之pandas数据合并
2021/04/27 Python