用JavaScript编写的一个点名系统_js中点名一个图片下面如何对应一个名字-CSDN博客

本文链接：https://blog.csdn.net/z_programmer/article/details/53728386
<!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;
				//随系统加载div
				var 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名为choose
			var 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();
			//定时器id
			var 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);
							//每次选中需要将定时器清空，以便下次点击时不至于return
							t=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怎么实现？？？