九宫格 前端初步封装

根据网上的一些代码进行简单的代码封装。
仅仅是初步封装,有很多情况没有考虑,算法采用了网上的开源的控制方法。

v1.0

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title></title>
<link rel=”stylesheet” href=””>
<style type=”text/css” media=”screen”>

#lottery {
width: 620px;
height: 620px;
overflow: hidden;
}
#lottery > div {
width:180px;
height:180px;
margin: 10px;
border:2px solid #ccc;
float: left;
}
#lottery > div.active {
background: #ccc;
}

</style>
</head>
<body>

<div id=”lottery”>
<div class=”lottery-unit lottery-unit-0″>
<div class=”mask”>1</div>
</div>
<div class=”lottery-unit lottery-unit-1″>
<div class=”mask”>2</div>
</div>
<div class=”lottery-unit lottery-unit-2″>
<div class=”mask”>3</div>
</div>
<div class=”lottery-unit lottery-unit-7″>
<div class=”mask”>8</div>
</div>
<div class=”start_wrap”>
<a href=”#” class=”start”>
抽奖
</a>
</div>
<div class=”lottery-unit lottery-unit-3″>
<div class=”mask”>4</div>
</div>
<div class=”lottery-unit lottery-unit-6″>
<div class=”mask”>7</div>
</div>
<div class=”lottery-unit lottery-unit-5″>
<div class=”mask”>6</div>
</div>
<div class=”lottery-unit lottery-unit-4″>
<div class=”mask”>5</div>
</div>

</div>

<script type=”text/javascript” src=”jquery-1.10.1.js”></script>
<script type=”text/javascript”>
;(function($){
$.fn.extend({
‘lottery’:function(params) {
var lottery = {
click:false,//点击按钮为默认false
index:-1,//当前转动到那个位置 起点位置(-1 没有位置)
count:0, //当前总共有多少位置
speed:20,//初始转动速度
timer:0,// setTimeout的id 用于清除定时器
times:0,//转动次数 第几次转动
cycle:50,//转动基本次数:即至少需要转动多少次再进入抽奖环节。
prize:-1,//位置,
init:function(obj) {
if ($(obj).find(‘.lottery-unit’).length > 0) {
var $lottery = $(obj);
var $units = $lottery.find(‘.lottery-unit’);
this.obj = $lottery;
this.count = $units.length;
$lottery.find(“.lottery-unit-“+this.index).addClass(‘active’);

$(obj).find(“.start”).click(function(){
if(lottery.click) {
return false;
} else {
lottery.click = true; // 当为click为false时,说明抽奖未开始或者已经结束,按钮可以点击了。当为true时,点击开始抽奖按钮。一直到抽奖结束点击抽奖按钮时返回false。
lottery.go(1);

}

});

}
},
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;

},
go:function(x) {
lottery.times += 1;
lottery.roll();//调用lottery的roll方法开始转动
if(x == 1) {
/*$.ajax({

});*/
setTimeout(function(){
// lottery.prize =6;
lottery.stop(6);
},2000)
//用settimeout模拟ajax向后台请求数据的过程。(可能有延时,可能有各种情况。)

}
//速度控制/中奖控制 中奖后多转10格
if(lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {//中奖

clearTimeout(lottery.timer);
lottery.prize = -1;
lottery.times = 0;
lottery.speed = 80;

setTimeout(function(){
alert(11)
},500)
lottery.click = false;

} else { //未中奖
if (lottery.times < lottery.cycle) {
//转动的格数小于设置的格数(lottery.cycle转动多少格可以进入抽奖环节)
lottery.speed -= 10;
//如果预设的速度 大于80 则减10。本质上是对settimeotu时间参数减小即,定时器运行的越来越快即转动的速度越来越快

} else if (lottery.times == lottery.cycle) {
//如果转动的格数等于设置的格数,进入抽奖环节
//检测是否中奖 lottery.prize > 0;
//可以执行到这里说明 还走的是没有中奖 再增加转动圈数
if(lottery.prize < 0) {
lottery.cycle += 10;
}

} else {
if(lottery.times > lottery.cycle + 10
&& (lottery.prize == 0 && lottery.index==7) || lottery.prize == lottery.index+1) {
lottery.speed += 100
} else {
lottery.speed += 20;
}

}

if(lottery.speed <= 80) {
lottery.speed = 80;
}

//循环调用
lottery.timer = setTimeout(function(){
lottery.go();
},lottery.speed);

}
},
stop:function(index){
this.prize=index;
return false;
}
};
this.each(function(){
lottery.init(this)
});

}
});
})(jQuery);
$(“#lottery”).lottery();
</script>
</body>
</html>

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/2762.html

发表评论

登录后才能评论