淘气的小丁-抽奖小游戏

抽奖小游戏

1. 我们先简单的布一下局，在这里我们引入了bootstrap框架，所以我们先写一个div给他一个类为container，在里面我们放两个button按钮分别给这两个按钮一个id，第一个id为btn1，第二个id为btn2，我们先给btn1的按钮给一个行内样式display：none，让他隐藏起来，它里面的文本为按钮，第二个的文本为停止。样式如下：

接下来我们来写抽奖的核心代码

1. 首先我们声明两个全局变量一个是变量time用来计时的，另一个变量为bl，把false赋值给他。
2. 我们的其他代码我们写在简写的ready事件里面，  $(function () {})。
3. 我们声明一个变量ss，将数组赋值给他，这个数组我们用来放图片的，我们一共放了九张图，每张图用双引号引起了，再通过逗号隔开，最外面用中括号来放。
4. 我们给btn1绑定点击事件， $("#btn1").click(function () {})，里面我们先获取div，并且调用css的方法，在设置一下背景，让它的url为ss[Math.floor(Math.random() * 9)]，$("div").css("background", 'url(' + ss[Math.floor(Math.random() * 9)] + ')'); Math对象的作用：执行普通的算数任务，floor()这个是Math对象里面的一个方法，作用为：对传进来的数进行向下舍入，random()这个也是它里面的一个方法，作用为：返回一个0到1之间的随机数且包括0不包括1。ss[Math.floor(Math.random() * 9)]而这句代码的意思是，随机再0到9（包括0不包括9）之间取一个数在对他进行向下舍入，再将得到的数当作索引给变量ss。
5. 我们给btn2绑定点击事件， $("#btn2").click(function () {})，在这里我们首先做一个判断，如果 bl变量的值为true，就跳出不再执行下面的代码，如果bl的值不为true我们就来写下面的代码。
6. 我们再来写一个无限循环计时器setInterval()，里面有两个参数，第一个是要调用的函数后要执行的 JavaScript 代码串。第二个是在执行代码前需等待的毫秒数。
7. 在这里我们再第一个参数的位置写一个匿名函数，在函数里面写上第一个按钮的点击，第二个参数我们设置为10毫秒，并且把它赋值给变量time，time = setInterval(function () {$("#btn1").click();}, 10);这句代码的意思为，每个 10毫秒自动点击一下第一个按钮。
8. 我们在声明一个变量ss2，把随机数Math.random() * 3000+1000赋值给他，这句代码的意思为随机在1000到4000（包括1000不包括4000）之间取数赋值给ss2。我们再用一个一次性计时器来清除上面的无限循环计时器，与上面一样他也有两个参数，在这里我们再第一个参数的位置写一个匿名函数，函数里面写clearInterval(time);这个就是清除计时器的方法，然后我们再让bl变量的值为false，第二个参数我们不设置为固定的值，而是将ss2放进去，这样就可以随机清除了。
9. 最后我们在让bl变量的值true。这样就可以阻止多次点击第二个按钮停不下来的情况。
10. 效果如下：

    

11. 点击抽奖开始按钮他就会在停止之前的时间里一直切换图片，直到计时器被清除他才会停下来。