最近公司举行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]);
}
}
- gift.rar (370.6 KB)
- 描述: 解压双击index.html即可运行
- 下载次数: 2382
分享到:
相关推荐
EXTJS高级程序设计源代码6-4 EXTJS高级程序设计源代码6-4
EXTJS高级程序设计源代码6-3 EXTJS高级程序设计源代码6-3
EXTJS高级程序设计源代码6-2 EXTJS高级程序设计源代码6-2
EXTJS高级程序设计源代码6-1 EXTJS高级程序设计源代码6-1
基于ExtJS 核心的抽奖程序源码 非常不错.zip
EXTJS产品级别管理后台源代码
extjs程序在开发调试时,看不到页面的实际源代码,借助该资源文件可以查看,方便调试。
深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码
ExtJs4 进销存 数据库sqlserver2000 ssi框架
基于ExtJS技术的Desktop网页桌面开发技术源代码。增加少量主题切换功能。比原版的Desktop增加了一些功能。从ExtJS中分离出来的源代码,可供程序员参考那些ExtJS核心库是必须的。
ExtJs3.1目前所有例子源代码,合适初学者
EXTJS4.0视频教程配套源代码(1--30)
java三大框架(SSH)+EXTJS物流管理系统源代码 用户名admin,密码123
深入浅出ExtJs书籍自带的源代码,分别是1到15章相对应的源代码。 目录清楚,结构清晰,代码详细!
extjs4 web应用程序开发指南源代码,国内首本
北大青鸟 李赞红老师 轻松搞定ExtJS 实例 源代码
Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv