抽奖器html

最新推荐文章于 2024-07-13 09:19:02 发布

mystudy2000

最新推荐文章于 2024-07-13 09:19:02 发布

阅读量991

点赞数

分类专栏： javascript问题解决方案

本文链接：https://blog.csdn.net/mystudy2000/article/details/8250746

版权

javascript问题解决方案专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、环境要求：用html4配合javascript写的抽奖器，只要电脑上有浏览器就可以运行。

2、功能：支持在抽奖过程中，更换当前要抽奖的人数。

3、缺点：

a.当人数过多时，可能有性能问题。

b.未对输入的人数作校验。

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>抽奖</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function setlistitem(){
	document.getElementById('rewardlist').innerHTML='';
	document.getElementById('listdiv').innerHTML='';
	narr=new Array();
	var pnum=parseInt(document.getElementById('pn').value,10), seln=parseInt(document.getElementById('spn').value,10);
	var selh=seln*31;
	document.getElementById('rewardlist').style.height=selh+'px';
	document.getElementById('maincon').style.height=selh+'px';
	for (var i=1; i<=pnum; i++){narr.push(i);}
	for (var i=1; i<pnum; i++){
		var ri=parseInt(Math.random()*(pnum-i)+i,10);
		var t=narr[ri];
		narr[ri]=narr[i-1];
		narr[i-1]=t;
	}
	drawlist();
}
function setbatch(){
	var seln=parseInt(document.getElementById('spn').value,10);
	var selh=seln*31;
	document.getElementById('rewardlist').style.height=selh+'px';
	document.getElementById('maincon').style.height=selh+'px';
	document.getElementById('rewardlist').innerHTML='';
}
function drawlist(){
	document.getElementById('listdiv').innerHTML='';
	var bl = narr.length, tmparr = new Array();
	for (var y=0;y<2;y++){
	for (var i=0; i<bl; i++){
		tmparr.push(narr[i]);
	}
	}
	var hs='';
	for (var i=0; i<tmparr.length; i++){
		hs+='<div class="item" id="n_'+i+'">'+tmparr[i]+'</div>';
	}
	document.getElementById('listdiv').innerHTML=hs;
	document.getElementById('listdiv').style.marginTop='0px';
}
var scrollTime=null, scrollFlag=false, narr;
function scrollitem(){
	if (scrollFlag){
		scrollTime = setTimeout('scrollitem()',70);
	}
	var mh=parseInt(document.getElementById('listdiv').style.marginTop,10);
	mh=mh-31;
	var pnum=parseInt(document.getElementById('pn').value,10);
	if (mh<=pnum/2*(-30)){
		mh=0;
	}
	document.getElementById('listdiv').style.marginTop=mh+'px';
}
function doplay(){
	if (scrollFlag){
		scrollFlag=false;
		clearTimeout(scrollFlag);
		document.getElementById('playbut').value='开始抽奖';
		var mh=parseInt(document.getElementById('listdiv').style.marginTop,10), pnum=parseInt(document.getElementById('pn').value,10), seln=parseInt(document.getElementById('spn').value,10);
		var si=mh*(-1)/31;
		var rewardarr = new Array();
		for (var ri=0;ri<seln; ri++){
			rewardarr.push(parseInt(document.getElementById('listdiv').childNodes[si+ri].innerHTML,10));
		}
		narrtmp = new Array();
		for (var xi=0;xi<narr.length;xi++){
			var ni=0, s=true;
			for (var yi=0;yi<rewardarr.length;yi++){
				if (narr[xi]==rewardarr[yi]){s=false;break;}
			}
			if (s){
				narrtmp.push(narr[xi]);
			}
		}
		narr=new Array();
		for (var xi=0;xi<narrtmp.length;xi++){
			narr.push(narrtmp[xi]);
		}
		drawlist();
		
		var hs = '';
		for (var i=0; i<rewardarr.length; i++){
			hs+='<div class="item">'+rewardarr[i]+'</div>';
		}
		document.getElementById('rewardlist').innerHTML+=hs;
	}else{
		scrollFlag=true;
		scrollitem();
		document.getElementById('playbut').value='停止';
	}
}
</script>
<style type="text/css">
.item{width:400px;height:30px;line-height:30px;border-bottom:1px solid #000;text-align:center;font-weight:700;font-size:25px;}
.itemlist{width:430px;height:180px;border:1px solid #000;}
.itemcon{width:400px;}
.setdiv{width:803px;height:30px;line-height:30px;text-align:center;}
</style>
</head>
<body>
<div class="setdiv"></div>
<div class="setdiv">
	参加总人数
	<input id="pn" value="20" type="text"/>
	<input value="重新开始" οnclick="setlistitem()" type="button"/>
	每次抽得个数
	<input id="spn" value="3" type="text"/>
	<input value="设置中奖人数" οnclick="setbatch()" type="button"/>
</div>
<table border="1" style="width:800px;">
<tr><td align="center"><h2>抽奖区</h2></td>
<td align="center"><h2>中奖号码</h2></td></tr>
<tr>
	<td>
	<div id="maincon" class="itemlist" style="overflow:hidden;">
	<div id="listdiv" class="itemcon" style="float:left;margin-top:0px"></div>
	</div>
	</td>
	<td>
	<div id="rewardlist" class="itemlist" style="overflow:scroll;">
	
	</div>
	</td>
</tr>
<tr>
	<td align="center" colspan="2">
	<input value="开始抽奖" id="playbut" οnclick="doplay()" style="width:300px;height:40px;" type="button"/>
	</td>
</tr>
</table>
</body>
</html>

算法只是简单的洗牌，如有问题，欢迎大家指正。