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 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
js面试题之异步问题的深入理解
Sep 20 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正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
动态创建类实例代码
2009/10/07 Python
详解Python中的日志模块logging
2015/06/19 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
django的ORM操作 增加和查询
2019/07/26 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
实习生自荐信范文
2013/11/13 职场文书
办公室文员工作职责
2014/01/31 职场文书
中学生运动会入场词
2014/02/12 职场文书
企业节能减排实施方案
2014/03/19 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
教师产假请假条范文
2014/04/10 职场文书
公司承诺书怎么写
2014/05/24 职场文书
单位提档介绍信
2015/10/22 职场文书