ExtJS 核心的抽奖程序（共享源代码）

最近公司举行15周年司庆晚会，公司首改以往丑旧的抽奖模式。领导要求我开发一套抽奖程序。
简单需求如下：
  1.要求数字随机闪动，当点击抽奖时，抽奖号码一个个停止下来。
  2.共设置纪念奖100名，每次抽取20，分5次抽取。
  3.共设置三等奖30名，每次抽取10名，分3次抽取。
  4.共设置二等奖10名，每次抽取5名，分两次抽取。
  5.共设置一等奖2名，每次抽取1名，分两次抽取。
  6.为了增加气氛，一等奖抽取号码分3位，分别是“百”，“十”，“个”。
  7.考虑到抽奖临时突发情况（比如老板高兴说再加10名三等奖等等），增加了纪念奖功能，纪念奖个数临时设定。（增加了开发的难度）
不过多亏ExtJS给我解决了各种难题，让我很快开发出来这套抽奖程序，现在程序圆满完成任务，并且达到了很好的现场气氛，心中很自豪。
由于时间仓促，代码没有布局整理。现在把程序共享出来。有兴趣想玩玩的可以下载直接用浏览器打开。
文章原始地址：http://yourgame.iteye.com/blog/327013
请加讨论Q_群:62150370(群1)   76202406(群2)  91986229(群3)一起讨论

最佳分辨率：1024*768
推荐浏览器：火狐浏览器
推荐浏览器全屏显示（F11）效果更好。

随机号码的生成.seed常量是抽奖的最大人数
通过Ext.fly方法来更新单元格中的内容

var seed = 263.99999;//抽奖人数为264个人
function process(td){
   var num = 1+Math.floor(Math.random()*(seed));
   var formatNum = String.leftPad(num,3,"0");
   if(!trophy.containsKey(formatNum) && !numbers.containsKey(formatNum)){
   	Ext.fly(td).update(formatNum);
   }
}
var taskg00 = {run : function(){process('g00');},interval : 10}

抽奖表单始终在画面的中间的代码

function resize(){
  Ext.get('table').alignTo('body','l',[80,-20],true);
  Ext.get('name').alignTo('body','l',[80,210],true);
}
window.onresize = resize;
  		
Ext.onReady(function(){    		
  resize();
  //.....
}

特别奖动态设定抽奖人数

							<div>
								<table cellspacing="3" border="1" cellpadding="0" align="center" width="855px"  height="217px">
									<tbody id="tbody">
										<tr id="tr">
										</tr>
										<tr id="trname">
										</tr>
										<tr>
											<td align="center" colspan="1" id="col">
												<nobr>
													<form name="personForm">
													<label for="person1" style="cursor: pointer;">
														<input id="person1" type="radio" name="person" value="0"/>所有人都可参加
													</label>
													<label for="person2" style="cursor: pointer;">
														<input id="person2" type="radio" name="person" value="1"/>已中奖者除外
													</label>
													抽奖个数:<input type="text" name="number" id="number" size="5" onblur="setTd(this.value);" onkeyup="if(eval(this.value) > 10){this.value = 10}setTd(this.value);" maxlength="2"/>
													</form>
													<button id="launch5">启动号码</button>
													<button id="lucky5">开始抽奖</button>
												</nobr>
											</td>
										</tr>
									</tbody>
								</table>
							</div>

   		var luckyTemplate5 = new Ext.XTemplate(
   			'<td id="p{0}" class="td">000</td>'
   		);
   		var luckyTemplate6 = new Ext.XTemplate(
   			'<td id="p{0}name" class="tdname">XXXXXX</td>'
   		);
   		var trTemplate = new Ext.XTemplate(
   			'<tr id="{0}"></tr>'
   		);
   		function setTd(number){
   			Ext.get('tr').remove();
   			Ext.get('trname').remove();
   			var col = Ext.getDom('col');
   			col.setAttribute('colspan',1);
   			trTemplate.insertFirst('tbody',['tr']);
   			trTemplate.insertAfter('tr',['trname']);
   			col.setAttribute('colspan',number);
   			for(var i=0;i<number;i++){
   				luckyTemplate5.append('tr',[i]);
   				luckyTemplate6.append('trname',[i]);
   			}
   		}

评论

13 楼 f43310 2015-11-22  

不错，向大神学习了

12 楼 hjcustc 2010-03-03  

太棒了，学习了！

11 楼 awdrhwadr 2009-12-29  

太棒了，巨崇拜。。。

10 楼 leonelwong 2009-06-22  

这个公司是不是家族公司啊，没外姓

9 楼 aaron7524 2009-05-20  

不错，不错啊 是把公司人的姓都改为廖了吧^_^

8 楼 yourgame 2009-05-20  

twostone 写道

真是太棒了。我所看到的抽奖程序中最不错最过瘾的！ （全公司都姓寥耶） 谢谢！ 另请教： 怎样动态修改“名单”呢？

这些数据都是从页面里面写死的。一般抽奖的人数都是固定的。这个没有什么数据库的。就是一个html页面

7 楼 twostone 2009-05-17  

真是太棒了。我所看到的抽奖程序中最不错最过瘾的！
（全公司都姓寥耶）
谢谢！

另请教：

怎样动态修改“名单”呢？

6 楼 yourgame 2009-02-17  

spspsp 写道

太牛了,几百个同姓的人,

啥公司这样牛啊?!

为了避嫌，所以才改的。

5 楼 spspsp 2009-02-17  

太牛了,几百个同姓的人,

啥公司这样牛啊?!

4 楼 lgl4223939 2009-02-17  

狂顶， 真流

3 楼 alert008 2009-02-12  

2 楼 Rowen 2009-02-12  

顶....哈哈...

1 楼 csjava 2009-02-11  

顶一个，呵呵