0


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已经完结,需要学习的朋友可以按顺序学习一遍!

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

标签: jquery javascript html

本文转载自: https://blog.csdn.net/qq_52736131/article/details/123868785
版权归原作者 跳探戈的小龙虾 所有, 如有侵权,请联系我们删除。

“JavaScript之jQuery学习三部曲【下篇】”的评论:

还没有评论