<!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怎么实现???