jquery|JavaScript之jQuery学习三部曲【下篇】 html|css3|前端|javascript

目录
I. 效果展示与素材整理
II. 实现思路分析
III. 布局的思路
IV. 给启动logo加点击函数
IV. 抽奖函数的封装
V. 完整源码
高质量前端博主，点个关注不迷路！

序言：
天下没有不散的宴席！本期是jQuery基础的最后一篇文章：【下篇】，我们用一个转盘抽奖实例对jQuery的学习进行检验。
强烈建议看到这篇文章的小伙伴们，可以抽个时间看一下【上篇】【中篇】，如果jQuery的基础还不错，也可以直接从这篇入手！

I. 效果展示与素材整理首先，我们先看一下大致的效果：

文章图片

之后，我们准备一下实战的素材，素材包括一张抽奖活动logo和若干的奖品图片，这些我都给大家准备好了，点击这里即可获取素材(提取码：dxzj)：【素材获取】
获取素材后，我们接下来可以进行代码的编写。
II. 实现思路分析那之后就是我们分析一下怎么实现我们的需求：

实现点击logo后，启动抽奖(即不同的礼品上的颜色由亮转暗)，并且在一段时间后，停止这种转换。

我们一点一点分解这个需求：
1?? 给启动logo加一个点击函数，这个函数是抽奖实现的函数。
2?? 抽奖函数需要实现，实现的方法是通过不断循环修改每一个图像的亮度样式值。
3?? 最后是具体怎么实现循环修改亮度值，需要jQuery获取当前的元素，并通过特殊的函数实现。
III. 布局的思路这个抽奖小案例，布局是很简单的，只需要整体使用div的盒子嵌套，第一层和第三层使用浮动，第二层使用定位即可：

body { background-color: #a2b9df; }.container { width: 910px; margin: 100px auto; }.row { overflow: hidden; position: relative; }.clear { clear: both; }.grid { opacity: 1; width: 180px; height: 180px; float: left; border: 1px solid black; }.start_region { cursor: pointer; background-image: url("../src/img/logo.jpg"); background-repeat: no-repeat; border: 1px solid black; position: absolute; left: 182px; width: 544px; height: 180px; }.price6 { float: right; } 文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片

至于为什么第一层和第三层浮动，第二层定位，原因是第二层需要放置一些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的基础，那么我们应该知道有两个关于时间的函数：

【jquery|JavaScript之jQuery学习三部曲【下篇】】setTimeout() 和 setInterval()

它们各自有两个参数，第一个参数是执行的函数，第二个参数是一个时间，其中：
(1) setTimeout()函数，会在设置的时间之后执行第一个参数定义的函数，之后的意思是，会先等待一段时间，这个时间由第二个参数设置，单位是毫秒。
(2) setInterval()函数，会每隔一段时间执行一次第一个参数定义的函数，这时间也由第二个参数设置，单位是毫秒。
因此，setTimeout()函数只会执行一次，而setInterval()函数会循环执行，我们组合这两个函数即可实现抽奖：

function startLottery() { var random_value = https://www.it610.com/article/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. 完整源码最后给大家送上完整的实战源码：

幸运抽奖body { background-color: #a2b9df; }.container { width: 910px; margin: 100px auto; }.row { overflow: hidden; position: relative; }.clear { clear: both; }.grid { opacity: 1; width: 180px; height: 180px; float: left; border: 1px solid black; }/* .price7 { opacity: 1; } */ .start_region { cursor: pointer; background-image: url("../src/img/logo.jpg"); background-repeat: no-repeat; border: 1px solid black; position: absolute; left: 182px; width: 544px; height: 180px; /* background-color: pink; */ }.price6 { float: right; } 文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片