抽奖器（投影仪专用）html

最新推荐文章于 2021-11-16 11:09:17 发布

mystudy2000

最新推荐文章于 2021-11-16 11:09:17 发布

阅读量711

点赞数

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

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

版权

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

8 篇文章 0 订阅

订阅专栏

1、多种浏览器环境可用。

2、界面为投影仪环境特别设计，方便用活动中展示。

3、抽奖结束后，可以复制全部获奖结果。

源代码如下：（默认加载了背景，背景图片在附件中，也可自己替换）

<!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">
var narr, scrollFlag=false,batchnum=0;
function setlistitem(){
	narr=new Array();document.getElementById('rewardhid').value='';batchnum=0;
	var pnum=parseInt(document.getElementById('pn').value,10), seln=parseInt(document.getElementById('spn').value,10);
	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;
	}
	document.getElementById('rewarddiv').innerHTML='<input value="开始抽奖" id="playbut" οnclick="doplay()" class="doplaybut" type="button"/>';
	alert('设置完成');
}
function setbatch(){
	var seln=parseInt(document.getElementById('spn').value,10);
	document.getElementById('rewarddiv').innerHTML='<input value="开始抽奖" id="playbut" οnclick="doplay()" class="doplaybut" type="button"/>';
}
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;
		var pnum=parseInt(document.getElementById('pn').value,10), seln=parseInt(document.getElementById('spn').value,10);
		var pnumlen = (pnum+'').length;
		var ri=parseInt(Math.random()*narr.length,10);
		var rewardarr = new Array();
		if ((ri+seln)<=narr.length){
			rewardarr =narr.splice(ri, seln);
		}else{
			rewardarr = narr;
			narr = rewardarr.splice(seln-(narr.length-ri)-1, narr.length-seln);
		}
		//rewarddiv rewardhid
		batchnum++;document.getElementById('rewardhid').value+='第'+batchnum+'次:';
		var hs = '';
		for (var i=0; i<rewardarr.length; i++){
			hs+='<div class="item">< '+formatenum(rewardarr[i],pnumlen)+' ></div>';
			document.getElementById('rewardhid').value+=formatenum(rewardarr[i],pnumlen)+', ';
		}
		document.getElementById('rewardhid').value+='\n\n';
		document.getElementById('rewarddiv').innerHTML=hs;
		document.getElementById('spn').focus();
	}else{
		scrollFlag=true;
		document.getElementById('playbut').value='停止';
	}
}
function formatenum(s, n){
	var str=s+'';
	while(str.length<n){
		str='0'+str;
	}
	return str;
}
function copyresult(){
	if (document.getElementById('rewardhid').style.display=='none'){
		document.getElementById('rewardhid').style.display='';
	}else{
		document.getElementById('rewardhid').style.display='none';
	}
}
</script>
<style type="text/css">
.item{width:447px;height:120px;line-height:120px;text-align:center;font-weight:700;font-size:85px;float:left;}
.setdiv{width:900px;height:30px;line-height:30px;text-align:center;}
#newtab tr td{height:90px;font-size:50px;}
.doplaybut{width:400px;height:70px;font-size:50px;}
</style>
</head>
<body>
<div style="width:900px;height:620px;margin:10px auto;background:url(back.jpg);">
<div class="setdiv">
	参加总人数
	<input id="pn" value="200" style="width:80px;" type="text"/>	
	<input value="重新设置" οnclick="setlistitem()" type="button"/>
	每次抽得个数
	<input id="spn" value="10" style="width:80px;" type="text"/>
	<input value="准备抽奖" οnclick="setbatch()" type="button"/>  
	<input value="复制结果" οnclick="copyresult()" type="button"/>
</div>
<textarea id="rewardhid" style="display:none;width:900px;height:500px;font-size:25px;" readonly="readonly"></textarea>
<table id="newtab" border="0" style="width:910px;">
<tr>
	<td style="color:#000;" id="rewarddiv" align="center" valign="center"></td>
</tr>
</table>
</div>
</body>
</html>