最近做了一个移动端九宫格抽奖页面。拿出来给大家分享一下。

页面布局HTML

<div id=”jiangping”></div>
<div id=”lottery”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td class=”lottery-unit lottery-unit-0″><img src=”images/1.png”></td>
<td class=”lottery-unit lottery-unit-1″><img src=”images/2.png”></td>
<td class=”lottery-unit lottery-unit-2″><img src=”images/4.png”></td>
<td class=”lottery-unit lottery-unit-3″><img src=”images/3.png”></td>
</tr>
<tr>
<td class=”lottery-unit lottery-unit-11″><img src=”images/7.png”></td>
<td colspan=”2″ rowspan=”2″><a href=”#”></a></td>
<td class=”lottery-unit lottery-unit-4″><img src=”images/5.png”></td>
</tr>
<tr>
<td class=”lottery-unit lottery-unit-10″><img src=”images/1.png”></td>
<td class=”lottery-unit lottery-unit-5″><img src=”images/6.png”></td>
</tr>
<tr>
<td class=”lottery-unit lottery-unit-9″><img src=”images/3.png”></td>
<td class=”lottery-unit lottery-unit-8″><img src=”images/6.png”></td>
<td class=”lottery-unit lottery-unit-7″><img src=”images/8.png”></td>
<td class=”lottery-unit lottery-unit-6″><img src=”images/7.png”></td>
</tr>
</table>
</div>

解释一下，页面是一张背景图上面的奖品是不同的图片定位上去的

css 部分

*{padding: 0;margin: 0;}
#lottery{width:2.95rem;height:3.03rem;padding: 0.23rem 0.24rem ;background:url(images/bg.jpg) no-repeat;background-size:87% 90%;margin:0.33rem 0.3rem;}
#lottery table td{width:0.617rem;height:0.655rem;text-align:center;vertical-align:middle;color:#333;font-index:-999;margin:0.2rem 0}
#lottery table td a{width:1.23rem;height:1.3rem;line-height:0.74rem;display:block;text-decoration:none;}
#lottery table td.active{background-color:#ea0000;}
#jiangping{
height: 100%;
width: 100%;
position: absolute;
display: none;
background: #ffffff;
font-size: 0.14rem;
}

移动端rem 适配。

下面就是重点的js 部分了

<script type=”text/javascript”>

移动端适配js 部分代码

;(function(win,doc){
function change(){
doc.documentElement.style.fontSize=doc.documentElement.clientWidth/3.75+’px’;
}
change();
win.addEventListener(‘resize’,change,false);
})(window,document);
</script>

++++++++以下是游戏实现逻辑++++++++++
<script type=”text/javascript” src=”jquery-1.8.3.min.js”></script>
<script type=”text/javascript”>
var lottery={
index:-1, //当前转动到哪个位置，起点位置
count:0, //总共有多少个位置
timer:0, //setTimeout的ID，用clearTimeout清除
speed:20, //初始转动速度
times:0, //转动次数
cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize:-1, //中奖位置
init:function(id){
if ($(“#”+id).find(“.lottery-unit”).length>0) {
$lottery = $(“#”+id);
$units = $lottery.find(“.lottery-unit”);
this.obj = $lottery;
this.count = $units.length;
$lottery.find(“.lottery-unit-“+this.index).addClass(“active”);
};
},
roll:function(){
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(“.lottery-unit-“+index).removeClass(“active”);
index += 1;
if (index>count-1) {
index = 0;
};
$(lottery).find(“.lottery-unit-“+index).addClass(“active”);
this.index=index;
return false;
}
};
function roll(){
lottery.times += 1;
lottery.roll();
if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
clearTimeout(lottery.timer);

lottery.prize=-1;
lottery.times=0;
click=false;

+++++结束后执行的页面+++++++++++
setTimeout(function(){
var jiangping = document.getElementById(“jiangping”);
jiangping.innerHTML=”您抽中的奖品是”+lottery.index;
jiangping.style.display=”block”;
},1000);

}else{
if (lottery.times<lottery.cycle) {
lottery.speed -= 10;
}else if(lottery.times==lottery.cycle) {
var index = Math.random()*(lottery.count)|0;
lottery.prize = index;
}else{
if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
lottery.speed += 110;
}else{
lottery.speed += 20;
}
}
if (lottery.speed<40) {
lottery.speed=40;
};

//console.log(lottery.times+’^^^^^^’+lottery.speed+’^^^^^^^’+lottery.prize);
lottery.timer = setTimeout(roll,lottery.speed);

}

return false;
}

var click=false;

window.onload=function(){
lottery.init(‘lottery’);
$(“#lottery a”).click(function(){
if (click) {
return false;

}else{
lottery.speed=100;
roll();

click=true;
return false;
}
});
};