上面的代码,从最上面定义我们所需的各种参数(都已做了注解);
接着点击开始抽奖,首先,在抽奖执行以前我们要先判断让一次的抽奖是否已经结束并且今天是否还有剩余的抽奖次数,当这两个条件都满足,开始执行抽奖light(),同时,在开始抽奖之前,将click这个参数置为false,避免抽奖还没结束用户就开始下一次的抽奖;
在抽奖
light()函数里面调用抽奖阴影不停移动的函数
img(),接着,给一个定时器
var timer = setTimeout(light, speed);这个定时器里面的light就是根据speed的速度来不停的调用
light()这个函数本身(城会玩),然后我们在下面根据这个抽奖阴影移动的次数不停地改变speed来改变light的调用速度从而改变阴影的移动速度(这个速度自己看数值怎么舒服怎么改吧);最后在这个
light()函数的最后要做定时器的清除,抽奖总要抽到东西的呀,不暂停怎么抽。。暂停以后要重置开始抽奖之前的参数。上面有一个maths随机数,这个是随机让用户抽奖随机中哪一个,要是需要固定比例的下一节出。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/choujiang.css" rel="external nofollow" />
<style type="text/css">
</style>
</head>
<body>
<div class="light">
<div class="num">
您今日抽奖机会还有<span class="red">3</span>次
</div>
<div class="gift_div">
<div class="gift gift1">奖品1</div>
<div class="gift gift2">奖品2</div>
<div class="gift gift3">奖品3</div>
<div class="gift gift4">奖品4</div>
<div class="gift gift5">奖品5</div>
<div class="gift gift6">奖品6</div>
<div class="gift gift7">奖品7</div>
<div class="gift gift8">奖品8</div>
<div class="start">开始抽奖</div>
</div>
</div>
</body>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>










