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 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
cmd下运行php脚本
2008/11/25 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP如何实现跨域
2016/05/30 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
Python如何将模块打包并发布
2020/08/30 Python
Django实现随机图形验证码的示例
2020/10/15 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
金融专业应届生求职信
2013/11/02 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
行政总经理岗位职责
2013/12/05 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python