用JavaScript编写的一个点名系统

<!DOCTYPE html>
<html><head><title>梁山点将</title><meta charset="utf-8"/><style>#root{margin: 0 auto;width:1020px;height:510px;background: pink;}#root div{width:100px;height:100px;border: 1px solid red;float: left;line-height:100px;text-align: left;font-family: "微软雅黑";font-size:8px;}#menu{margin: 0 auto;width:450px;height:50px;background: green;line-height:50px;vertical-align: middle;}#menu span{/*background: #CCC;*/display: inline-block;font-family: "微软雅黑";font-weight: bold;color: red;/*border: 1px solid red;*/}.choose{background-color: red;color: #FFF;}.remove{background-color: black;}</style><script>var   names;var startlength;window.οnlοad=function(){names=["呼保义宋江","玉麒麟卢俊义","智多星吴用","入云龙公孙胜","大刀关胜","豹子头林冲","霹雳火秦明","双鞭呼延灼","小李广花荣","小旋风柴进","扑天雕李应","美髯公朱仝","花和尚鲁智深","行者武松","双枪将董平 ","没羽箭张清","青面獣杨志","金枪手徐宁","急先锋索超","神行太保戴宗","赤髪鬼刘唐","黒旋风李逵","九纹龙史进","没遮拦穆弘","挿翅虎雷横","混江龙李俊","立地太歳阮小二","船火児张横","短命二郎阮小五","浪里白跳张顺","活阎罗阮小七","病关索杨雄","拚命三郎石秀","两头蛇解珍","双尾蝎解宝","浪子燕青","神机军师朱武","镇三山黄信","病尉遅孙立","丑郡马宣赞","井木犴郝思文","百胜将韩滔","天目将彭玘","圣水将单廷圭","神火将魏定国","圣手书生萧让","鉄面孔目裴宣","摩云金翅欧鹏","火眼狻猊邓飞","锦毛虎燕顺"];startlength=names.length;//随系统加载divvar root = document.getElementById("root");for(var i=0;i<=names.length-1;i++){var ndiv = document.createElement("div");ndiv.id=i;ndiv.innerHTML=i+":"+names[i];root.appendChild(ndiv);}    }//随机产生一个数（该数表示数组的下标），之后设置改div的class名为choosevar rand;//persons数组存放被选中的节点var persons=new Array();//p表示每个div节点var p;//统计选中的人数var count=0;//第一种方式点将function choose(){rand = Math.floor(Math.random()*names.length);p = document.getElementById(rand);if(p.className!="choose"){p.className="choose";be_choose();}else{alert(rand+"号:"+names[rand]+" 已被选中，请重新选择！");}//将选中的节点存放到数组中persons.push(p);}//额外新建一个数组存放定时器阶段产生的临时人员var persons2 = new Array();//定时器idvar t;//第二种点将方式，使用一次性定时器进行选择function autochoose(){//若满了，则不再点将了if(persons.length==startlength){return;}//主要为了避免多次点击button的现象if(t){return;}//设置一个变量；每个定时任务index++，当index=10的时候，终止定时器var index=0;t = setInterval(function(){rechoose2();//每次定时任务进行时，均将上个周期内的设置恢复index++;rand = Math.floor(Math.random()*names.length);   p = document.getElementById(rand);if(index<10){if(p.className!="choose"){p.className="choose";persons2.push(p);}else{index--;}}else{if(p.className!="choose"){persons.push(p);p.className="choose";be_choose();clearInterval(t);//del(rand);//每次选中需要将定时器清空，以便下次点击时不至于returnt=null;}else{index--;}}},100);   }//将persons中的元素删除，将选中的背景色全部调整回原来function rechoose(){for(var i=0;i<persons.length;i++){var person = persons[i].id;nickname=names[person];persons[i].className=nickname;console.log(persons);}var span = document.getElementById("be_choose");span.innerHTML="";count=0;persons = new Array();}//删除存放的临时人员；即将persons2中的背景色调整回去function rechoose2(){for(var i=0;i<persons2.length;i++){var person2 = persons2[i].id;nickname=names[person2];persons2[i].className=nickname;}persons2 = new Array();}//将选中的人，在menu下span中显示function be_choose(){var span = document.getElementById("be_choose");span.innerHTML = names[rand]+";已点将:"+(++count);}//删除选中的人；没有调用！function del(rand){console.log(rand);var temp = 0;temp = names[rand];names[rand] = names[names.length-1];names[names.length-1]=temp;var p1 = document.getElementById(rand);p1.innerHTML="新"+rand+"号:"+names[rand];console.log(p1.innerHTML);var p2 = document.getElementById(names.length-1);p2.className="remove";names.pop();console.log(names);}</script></head> <body> <div id="all"><div id="menu"><input type="button" value="开始点将" οnclick="choose()"/> <input type="button" value="重新选择" οnclick="rechoose()"/> <input type="button" value="自动选择" οnclick="autochoose()"/><span id="be_choose"></span></div><div id="root"></div><div><input type="hidden" value="随着人逐渐被选中，数据的长度逐渐减少，那么伪随机数产生的范围也会逐渐变少，不然到最后会造成很多次选择才能选中的情况本程序一开始采用了将选中的节点逐个从原数组中删除，但是效果不好最后放弃了，时间问题，以后再说！"/> </body>
</html>

！！！for循环中每一次循环设置sleep怎么实现？？？

用JavaScript编写的一个点名系统相关推荐

JavaScript编写了一个计时器
初学JavaScript,用JavaScript编写了一个计时器. 设计思想: 1.借助于Date()对象,来不断获取时间点: 2.然后用两次时间点的毫秒数相减,算出时间差: 3.累加时间差,这样就能 ...
使用HTML+javascript编写了一个生成题库小工具
因为前段时间学校要准备考试,但是没有题库只有word的试题,我本人更习惯做题不适合背题,然后我就上网找了一下生成题库的软件,没有找到我想要的,所以就自己动手写了一个 HTML代码插入链接与图片代码 ...
C语言实现课堂随机点名系统
今天重温一下在学校时写的课程设计,复习一下在学校里学到的东西,同时也希望能够帮助到那些和我一样被课设所折磨的可怜人儿~ 文章目录 1.项目要求 2.项目功能的实现函数一:将选择打开文件内容读入结构体 ...
自动点名系统c语言,用C语言编写一个随机点名系统
/*编写一个随机点名系统,运行该系统后,按空格键可以显示出一名同学,以前被选中的同学,将不会再次被选中*/ #include /*standard input & output*/ #incl ...
运用javascript写一个简单的点名系统！
这个项目是我之前写的最初的点名系统,很垃圾.过段时间放上我之前写的高级一点的 <!DOCTYPE html> <html lang="en"> <he ...
JavaScript - WebAPI - 案例 - 点名系统/打地鼠/计时器/今日代办
点名系统 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title&g ...
自动点名c语言,编撰一个随机点名系统
编写一个随机点名系统 1. 编写一个随机点名系统,运行该系统后,按空格键可以显示出一名同学,以前被选中的同学,将不会再次被选中 2.采用C语言数据结构数组指针随机数文件读写的方式不必使用 ...
c语言中如何设计和编写一个应用系统？
C程序中,如何设计和编写一个应用系统? 一. C语言文件的操作 1. 文件操作的基本方法: C语言将计算机的输入输出设备都看作是文件.例如,键盘文件.屏幕文件等. 向屏幕输出一个信息,例如" ...
这两天发现一个老外用JavaScript编写的好东西：dp.SyntaxHighlighter。
dp.Synta 来源http://blog.s135.com/post/226/ r介绍:在网页中加亮显示源代码的工具[原创] 大 | 中 | 小 [ 2007-4-19 14:56 | by ...

用JavaScript编写的一个点名系统

用JavaScript编写的一个点名系统相关推荐

最新文章

热门文章