2021-05-06

文献种类：专题技术总结文献
开发工具与关键技术： DW JQ
作者：甘建豪 ；撰写时间：2021 年 4 月 30日

jq实现抽奖的案例

开发工具与关键技术：DW ，JQ
作者：甘建豪
撰写时间：2021/4/30

一．Html里就是 用9个盒子布置而成 ，中间的就是按钮就像一个九宫格一样。

二．Css样式比较简单设置一个按钮和 奖品盒子样式不一样就好，逻辑就是首先设置 它们的边框的颜色都是一样的，抽奖到的那个边框为高亮效果，边框高亮的效果在8个盒子有顺序得循环着，最后停到哪里就是抽到什么奖品。

三．最后我们来看代码图如下所示

①首先 我们来给按钮 play添加点击事件 ，事件里面调用一个连续触发定时器，300毫秒触发一次。
②然后我们设置一个全局变量m=0, 再用jq获取到盒子的第m个盒子给它的边框样式设置高亮效果，然后用链式结构获取到其余兄弟们的样式都为统一颜色，这就凸显出第n个盒子的边框有了高亮的效果。

③再给m设置m++ 计时器每调用一次 m就+1，这样就会有了一个抽奖的动画效果，再给它一个判断条件当m=8时将其赋值为1，形成一个循环。
④抽奖动画是需要停止的所以我们给它一个随机数命名一个变量rond从5秒到15秒的时间用作于一个普通定时器的执行时间，在这个定时器里面调用清除连续触发定时器（ti），随机时间到的时候就清除定时器。其实这个时间可能有点长你们可以自己调下参数。
⑤最后有个小bug如果在动画没有停止的时候再次点击按钮就会出现bug导致抽奖停不下来，这个时候就要用到一个处理的方法：设置一个全局变量为true命名为kbug ，当kbug为true时就执行代码。一开始点击时kbug为true，所以可以执行连续触发定时器，但是在定时器下面有个kbug赋值为false，在清除了连续触发定时器（ti）的时候再赋值为true，意思为在动画没有停止之前再次点击是没有用的因为在这个时候if语句判断到的kbug为false，在动画效果被清除了之后kbug的值才为true，再次点击才有效果。

最后这是完成的效果图。