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

高质量前端博主，点个关注不迷路🌸🌸🌸！

序言：

天下没有不散的宴席！本期是jQuery基础的最后一篇文章：【下篇】，我们用一个转盘抽奖实例对jQuery的学习进行检验。

强烈建议看到这篇文章的小伙伴们，可以抽个时间看一下【上篇】【中篇】，如果jQuery的基础还不错，也可以直接从这篇入手！

I. 效果展示与素材整理

首先，我们先看一下大致的效果：

之后，我们准备一下实战的素材，素材包括一张抽奖活动logo和若干的奖品图片，这些我都给大家准备好了，点击这里即可获取素材(提取码：dxzj)：【素材获取】

获取素材后，我们接下来可以进行代码的编写。

II. 实现思路分析

那之后就是我们分析一下怎么实现我们的需求：

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

我们一点一点分解这个需求：

1️⃣ 给启动logo加一个点击函数，这个函数是抽奖实现的函数。

2️⃣ 抽奖函数需要实现，实现的方法是通过不断循环修改每一个图像的亮度样式值。

3️⃣ 最后是具体怎么实现循环修改亮度值，需要jQuery获取当前的元素，并通过特殊的函数实现。

III. 布局的思路

这个抽奖小案例，布局是很简单的，只需要整体使用div的盒子嵌套，第一层和第三层使用浮动，第二层使用定位即可：

<style>
    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;
    }
</style>

<div class="container">
    <div class="row">
        <div class="grid price1">
            <img src="../src/img/《计算机网络：自顶向下方法》.jpeg">
        </div>
        <div class="grid price2"><img src="../src/img/《0基础学Java》.jpeg"></div>
        <div class="grid price3"><img src="../src/img/《0基础：html+css从入门到精通》.jpeg"></div>
        <div class="grid price4"><img src="../src/img/《Arduino编程与硬件实现》.jpeg"></div>
        <div class="grid price5"><img src="../src/img/《C++程序设计》.jpeg"></div>
    </div>
    <div class="row">
        <div class="grid price12"><img src="../src/img/《C语言：从入门到精通》.jpeg"></div>
        <div class="start_region"></div>
        <div class="grid price6"><img src="../src/img/《go web编程》.jpeg"></div>
    </div>
    <div class="row">
        <div class="grid price11"><img src="../src/img/《python基础：从入门到实践》.jpeg"></div>
        <div class="grid price10"><img src="../src/img/《python游戏编程快速上手》.jpeg"></div>
        <div class="grid price9"><img src="../src/img/《React设计模式与最佳推荐》.jpeg"></div>
        <div class="grid price8"><img src="../src/img/《web前端开发》.jpeg"></div>
        <div class="grid price7"><img src="../src/img/《计算机科学导论》.jpeg"></div>
    </div>
</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. 完整源码

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

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运抽奖</title>
    <style>
        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;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="grid price1">
                <img src="../src/img/《计算机网络：自顶向下方法》.jpeg">
            </div>
            <div class="grid price2"><img src="../src/img/《0基础学Java》.jpeg"></div>
            <div class="grid price3"><img src="../src/img/《0基础：html+css从入门到精通》.jpeg"></div>
            <div class="grid price4"><img src="../src/img/《Arduino编程与硬件实现》.jpeg"></div>
            <div class="grid price5"><img src="../src/img/《C++程序设计》.jpeg"></div>
        </div>
        <div class="row">
            <div class="grid price12"><img src="../src/img/《C语言：从入门到精通》.jpeg"></div>
            <div class="start_region"></div>
            <div class="grid price6"><img src="../src/img/《go web编程》.jpeg"></div>
        </div>
        <div class="row">
            <div class="grid price11"><img src="../src/img/《python基础：从入门到实践》.jpeg"></div>
            <div class="grid price10"><img src="../src/img/《python游戏编程快速上手》.jpeg"></div>
            <div class="grid price9"><img src="../src/img/《React设计模式与最佳推荐》.jpeg"></div>
            <div class="grid price8"><img src="../src/img/《web前端开发》.jpeg"></div>
            <div class="grid price7"><img src="../src/img/《计算机科学导论》.jpeg"></div>
        </div>
    </div>
    <script type="text/javascript" src="../src/jquery.min.js"></script>
    <script>
        function getRandomValue() {
            var random_value = Math.floor(Math.random() * 12) + 1
            return random_value
        }
        function trimString(str) {
            let startIndex = 0;
            let endIndex = 0;
            for (let i = 0; i < str.length; i++) {
                if (str[i] == "《") {
                    startIndex = i;
                }
                if (str[i] == "》") {
                    endIndex = i
                }
            }
            return str.substring(startIndex, endIndex + 1)
        }
        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)
        }
        $(".start_region").bind("click", function () {
            startLottery()
        })
    </script>
</body>

</html>

独立写完这个实战，说明你的jQuery已入门，但请注意，是入门，以后还需要继续实战和学习！

以上是本期的全部内容，喜欢的小伙伴们可以三连支持一下！💓💓💓！三部曲jQuery已经完结，需要学习的朋友可以按顺序学习一遍！

另外本期博客参与了【新星计划】，还请大家支持一下🌟🌟🌟！