抽奖的例子
<html><head>
<meta charset="utf-8"/>
<style>
*{ margin: 0; padding:0;}
.抽奖节点{
width: 300px;
height: 150px;
}
.抽奖节点 .活动{
position: absolute;
width: 100px;
height: 50px;
background: #f00;
line-height: 50px;
text-align: center;
border:solid 1px #999;
margin:-1px;
}
.抽奖格子,
.抽奖按钮{
position: absolute;
background:#ccc;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
.抽奖按钮{
background:#f0f;
cursor: pointer;
}
</style>
</head>
<body>
<div class="抽奖节点" id="抽奖节点">
<div class="抽奖格子" style="left:0;top:0">1</div>
<div class="抽奖格子" style="left:100px;top:0">2</div>
<div class="抽奖格子" style="left:200px;top:0">3</div>
<div class="抽奖格子" style="left:200px;top:50px">4</div>
<div class="抽奖按钮" style="left:100px;top:50px" id="抽奖开始">抽奖开始</div>
<div class="抽奖格子" style="left:200px;top:100px">5</div>
<div class="抽奖格子" style="left:100px;top:100px">6</div>
<div class="抽奖格子" style="left:0;top:100px">7</div>
<div class="抽奖格子" style="left:0;top:50px">8</div>
</div>
</body>
<script>
//构造函数
var 抽奖=(function(文档节点){
function 获取项目筛选器类(类,项目){
var ret=[];
for(var i=0,长度=项目.length;i<长度;i++){
if(项目[i].className.indexOf(类)>-1){
ret.push(项目[i]);
}
}
return ret;
}
return function(选项){
this.节点=文档节点.getElementById(选项.id)||文档节点.body;
this.项目=选项.项目||获取项目筛选器类(选项.id.replace('节点','')+'格子',this.节点.getElementsByTagName('*'));
this.btn=文档节点.getElementById(选项.btn);
this.当前类=选项.当前类||'活动';
this.奖品号=-1;
this.当前索引=0;
this.循环=null;
this.转圈速度数组=[100,50,30,50,100,150];
this.转圈速度数组.编号=0;
this.回调函数=选项.回调函数||function(){};
}
})(document);
//工具方法
抽奖.prototype.设置滚动动画=function(时间间隔,停止数){
var 当前抽奖对象=this,长度=停止数||当前抽奖对象.项目.length;
当前抽奖对象.清除滚动动画();
当前抽奖对象.循环=setInterval(function(){
if(当前抽奖对象.当前索引>长度-1){
当前抽奖对象.清除滚动动画();
当前抽奖对象.下一步();
return;
}
当前抽奖对象.设置活动图块(当前抽奖对象.当前索引);
当前抽奖对象.当前索引++;
},时间间隔);
}
抽奖.prototype.设置活动图块=function(索引){
//设置中奖状态
for(var i=0,长度=this.项目.length;i<长度;i++){
this.项目[i].className='抽奖格子';
}
this.项目[索引].className='活动';
}
抽奖.prototype.清除滚动动画=function(){
//清除动画
var 当前抽奖对象=this;
当前抽奖对象.循环&&clearInterval(当前抽奖对象.循环);
}
抽奖.prototype.下一步=function(){
//动画排序
this.当前索引=0;
this.循环=null;
var 时间间隔=this.转圈速度数组[this.转圈速度数组.编号];
if(this.转圈速度数组.编号>this.转圈速度数组.length-1){
this.回调函数(this.奖品号);
return;}
if(this.转圈速度数组.编号===this.转圈速度数组.length-1){
this.设置滚动动画(时间间隔,this.奖品号);//奖品设置
this.转圈速度数组.编号++;
return;
}
this.设置滚动动画(时间间隔);
this.转圈速度数组.编号++;
}
抽奖.prototype.重置=function(){
this.清除滚动动画();
this.转圈速度数组.编号=0;
}
var 抽奖结果=[10,110,10,130,160,20,60,100];
var 我的抽奖=new 抽奖({
id:'抽奖节点',
回调函数:function(奖品号){
alert("您中了 金币"+抽奖结果[奖品号]+"枚 ");
}
})
document.getElementById('抽奖开始').onclick=function(){
我的抽奖.重置();
我的抽奖.奖品号=parseInt(Math.random()*8);
我的抽奖.下一步();
}
</script>
</html>
