抽奖器html

来源：互联网发布：php数组值相加编辑：程序博客网时间：2024/04/29 02:14

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="重新开始" onclick="setlistitem()" type="button"/>每次抽得个数<input id="spn" value="3" type="text"/><input value="设置中奖人数" onclick="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" onclick="doplay()" style="width:300px;height:40px;" type="button"/></td></tr></table></body></html>

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