JavaScript之jQuery学习三部曲【下篇】，2024最新前端高频精选面试题讲解

---

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()

它们各自有两个参数，第一个参数是执行的函数，第二个参数是一个时间&