JavaScript之jQuery学习三部曲【下篇】

---

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 = 1

var 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. 完整源码

---

最后给大家送上完整的实战源码：