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清空多文本框、文本域示例代码

    JS清空多文本框、文本域示例代码

    点击按钮清空页面上所有的文本框、文本域,下面有个不错的示例,大家可以参考下其具体实现
    2014-02-02
  • 深入理解JavaScript系列(3) 全面解析Module模式

    深入理解JavaScript系列(3) 全面解析Module模式

    Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式
    2012-01-01
  • cocos2dx骨骼动画Armature源码剖析(一)

    cocos2dx骨骼动画Armature源码剖析(一)

    cocos2dx中的骨骼动画在程序中使用非常方便,从编辑器(cocostudio或flash插件dragonBones)得到xml或json数据,调用代码就可以直接展示出动画效果,下面通过本篇文章给大家分享cocos2dx骨骼动画Armature源码剖析,需要的朋友一起来学习吧。
    2015-09-09
  • js校验表单后提交表单的三种方法总结

    js校验表单后提交表单的三种方法总结

    本篇文章主要是对js校验表单后提交表单的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JS获取图片lowsrc属性的方法

    JS获取图片lowsrc属性的方法

    这篇文章主要介绍了JS获取图片lowsrc属性的方法,涉及javascript操作网页图片属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • js检查是否全是中文

    js检查是否全是中文

    判断是否全是中文的脚本
    2008-09-09
  • 情人节之礼 js项链效果

    情人节之礼 js项链效果

    情人节马上要到了,为情人节奉献一份礼物哈。。。一定要支持CSS3渲染的浏览器
    2012-02-02
  • 浅谈layui分页控件field参数接收对象的问题

    浅谈layui分页控件field参数接收对象的问题

    今天小编就为大家分享一篇浅谈layui分页控件field参数接收对象的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 通过js示例讲解时间复杂度与空间复杂度

    通过js示例讲解时间复杂度与空间复杂度

    这篇文章主要给大家介绍了关于如何通过js示例讲解时间复杂度与空间复杂度的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • javascript常用代码段搜集

    javascript常用代码段搜集

    这篇文章主要记录了本人搜集的几段javascript常用代码段,都是平时项目中需要用到的,需要的朋友可以参考下
    2014-12-12

最新评论