JavaScript之jQuery学习三部曲【下篇】
目录
I. 效果展示与素材整理
II. 实现思路分析
III. 布局的思路
IV. 给启动logo加点击函数
IV. 抽奖函数的封装
V. 完整源码
高质量前端博主，点个关注不迷路🌸🌸🌸！
序言：
天下没有不散的宴席！本期是jQuery基础的最后一篇文章：【下篇】，我们用一个转盘抽奖实例对jQuery的学习进行检验。
强烈建议看到这篇文章的小伙伴们，可以抽个时间看一下【上篇】【中篇】，如果jQuery的基础还不错，也可以直接从这篇入手！
I. 效果展示与素材整理
首先，我们先看一下大致的效果：
之后，我们准备一下实战的素材，素材包括一张抽奖活动logo和若干的奖品图片，这些我都给大家准备好了，点击这里即可获取素材(提取码：dxzj)：【素材获取】
获取素材后，我们接下来可以进行代码的编写。
II. 实现思路分析
那之后就是我们分析一下怎么实现我们的需求：
实现点击logo后，启动抽奖(即不同的礼品上的颜色由亮转暗)，并且在一段时间后，停止这种转换。
我们一点一点分解这个需求：
1️⃣ 给启动logo加一个点击函数，这个函数是抽奖实现的函数。
2️⃣ 抽奖函数需要实现，实现的方法是通过不断循环修改每一个图像的亮度样式值。
3️⃣ 最后是具体怎么实现循环修改亮度值，需要jQuery获取当前的元素，并通过特殊的函数实现。
III. 布局的思路
这个抽奖小案例，布局是很简单的，只需要整体使用div的盒子嵌套，第一层和第三层使用浮动，第二层使用定位即可：
至于为什么第一层和第三层浮动，第二层定位，原因是第二层需要放置一些logo和其他的内容，定位比较容易实现，当然第二层也可以用浮动，这个看个人选择。
IV. 给启动logo加点击函数
好了，布局结束了，我们的战斗才刚刚开始：
可以开始复习jQuery了，首先我们回忆一下怎么用jQuery实现绑定事件，并据此写出logo的点击函数，它应该是这么写的：
$(".start_region").bind("click", function () {startLottery()
})其中，start_region是logo那一部分区域的类名，通过类名，我们用jQuery的语法获取到了logo这个元素，并使用bind()，进行绑定，绑定的内容是“startLottery()”，这个函数我们还没写，但是可以先把这个框架搭出来。(这也是一种做项目的思路，先整体后局部)
IV. 抽奖函数的封装
那接下来就是重头戏了：实现抽奖这件事，我们之前也分析了，其实实现抽奖又可以拆分成两个步骤：
1️⃣ 让某一个奖品元素的亮度由亮转暗：
这一步其实就比较简单了，由亮色转暗色，如果是某个背景色，我们可以通过修改css里的background-color样式，但是由于我们这里奖品是图片，因此我们用另一个css样式：
opacity ： [0-1]
先说明，这个样式并不是亮转暗，而是一个元素的不透明度，取值是0-1,1的时候是完全不透明，显示出来就是亮色效果，0的时候完全透明，此时它的颜色就是底层元素的颜色。(如果更美观，可以使用其他效果控制明暗，这里我采用这个比较简易的方式，但不是最优解！)
于是我们首先，在定义图片的时候，把图片所在的盒子的css样式里写上这样一句：
.grid {opacity: 1;
}之后，我们使用jQuery的语法，对元素grid的该样式进行修改，语法是这样的：
$(".grid").css("opacity", "0.5");所以这一步就完成了，当然了上面这句是让它"变暗"，变亮的话后面的值改成1即可。
2️⃣ 循环这个转变过程：
这步就稍微有点需要思考的地方了，此时我假设大家有JavaScript的基础，那么我们应该知道有两个关于时间的函数：
setTimeout() 和 setInterval()
它们各自有两个参数，第一个参数是执行的函数，第二个参数是一个时间，其中：
(1) setTimeout()函数，会在设置的时间之后执行第一个参数定义的函数，之后的意思是，会先等待一段时间，这个时间由第二个参数设置，单位是毫秒。
(2) setInterval()函数，会每隔一段时间执行一次第一个参数定义的函数，这时间也由第二个参数设置，单位是毫秒。
因此，setTimeout()函数只会执行一次，而setInterval()函数会循环执行，我们组合这两个函数即可实现抽奖：
function startLottery() {var random_value = getRandomValue();random_value = random_value + 12 * 1;var ticks = 1;var index = 1var timer = null;timer = setInterval(function () {$(".price" + index).css("opacity", "0.5");setTimeout(function () {if (ticks < random_value) {$(".price" + index).css("opacity", "1");index = (index + 1) % 13;ticks++;}else {clearInterval(timer);var result = "恭喜您获得：" + trimString($(".price" + index).children("img").attr("src"));alert(result);$(".price" + index).css("opacity", "1");}}, 160)}, 180)
}当然，这里要对一些细节补充一下讲解：
(1) 关于随机数，这里封装了一个随机数，从1到12，代表了这一轮的奖品是什么
(2) 关于随机数乘上某个数，这是由于我们的转盘不能只转动一圈，每一圈就得多1，所以要乘上倍数
(3) 关于取模，这是因为我们的索引只有1-12，超过12的通过取模实现再从1开始。
(4) 关于抽奖结果字符串，这个是通过提取img的src属性，属性里是包含了书名，我们封装一个处理字符串的函数，提取书名即可。
V. 完整源码
最后给大家送上完整的实战源码：
幸运抽奖