【jQuery笔记Part3】03-jQuery项目：随机抽奖

最新推荐文章于 2022-10-28 13:23:24 发布

萌宅鹿同学

最新推荐文章于 2022-10-28 13:23:24 发布

阅读量344

点赞数

分类专栏： # jQuery笔记文章标签： jQuery案例 jQuery动画随机抽奖

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100085650

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery随机抽奖

js 定时器
静态页面
页面展示
按钮点击

jQuery笔记目录

js 定时器

具体用法（菜鸟教程）

setInterval()

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setInterval(code,millisec,lang)

参数说明：

code：必需。要调用的函数或要执行的代码串。
millisec：必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang：可选。 JScript | VBScript | JavaScript

setTimeout()

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

setTimeout(code,millisec,lang)

参数说明：

code：必需。要调用的函数后要执行的 JavaScript 代码串。
millisec：必需。在执行代码前需等待的毫秒数。
lang：可选。脚本语言可以是：JScript | VBScript | JavaScript

清除定时器

由于定时器在调用时，都会返回一个整形的数字，该数字代表定时器的序号，即第多少个定时器，所以定时器的清除要借助于这个返回的数字。
定时器清除的方法：clearTimeout(obj) 和 clearInterval(obj)。
要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值。如下：

//setTimeout 1000ms后执行1次
var test1 = setTimeout(function(){
    //your codes
},1000);
 
//setInterval 每隔1000ms执行一次
var test2 = setInterval(function(){
   //your codes
},1000)
 
//清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)
clearTimeout(test1);
 
//清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)
clearInterval(test2);

静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖效果-界面搭建</title>
    <style>
        * {padding: 0;margin: 0;list-style: none;}
        .box {width: 300px;height: 300px;margin: 100px auto;border: 1px solid orange;}
        .goods li {width: 100px;height: 100px;float: left;box-sizing: border-box;}
        .goods li img {width: 100px;height: 100px;}
        .current {border: 1px solid orange;}
        #begin img{
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="goods">
        <li><img src=""></li>
        <li  class="current"><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li id="begin"><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
    </ul>
</div>

</body>
</html>

页面效果：
在这里插入图片描述

页面展示

$(function () {
// 0. 数据源
var goodsNames = ['耳机', '平板电脑', '感谢参与', '平板鞋', 'begin', '特步', '玩偶','ipone手机', '安卓手机'];

var goodsImages = [];
for(var i = 1;i < 10;i++){
	goodsImages.push('images/' + i + '.png');
}
// console.log(goodsImages)

//2.页面展示
$('.goods>li>img').each(function (index,value) {
	$(this).attr('src',goodsImages[index]);
	});
});

界面效果：
在这里插入图片描述

按钮点击

// 0. 数据源
var goodsNames = ['耳机', '平板电脑', '感谢参与', '平板鞋', 'begin', '特步', '玩偶',
    'ipone手机', '安卓手机'];

var goodsImages = [];
for(var i = 1;i < 10;i++){
    goodsImages.push('images/' + i + '.png');
}
// console.log(goodsImages)

//2.页面展示
$('.goods>li>img').each(function (index,value) {
    $(this).attr('src',goodsImages[index]);
});


//3. 监听按钮的点击
var timer = null; // 要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值
var showIndex = 0,currentGunIndex = 0;
$('#begin').click(function () {
    //3.1 清除定时器
    clearInterval(timer)
    //3.2 控制滚动的圈数
    var count = Math.floor(Math.random() * 8) + 8;
    console.log(count);
    //3.3 指定滚动的路径
    var showIndexs = [0, 1, 2, 5, 8, 7 , 6, 3];
    //3.4 根据路径进行滚动
    timer = setInterval(function () {
        //3.5 判断清楚定时器的条件
        if(count <= 0){
            // 判断是否中奖
             if(showIndex === 2){
                 alert('运气不是太好，加油喔！');
             }else {
                 alert('恭喜中奖，奖品是：' + goodsNames[showIndex])
             }
            // 清除定时器
            clearInterval(timer);
            return;
        }

        //3.6 条件处理
        count--;

        // 滚动循环 1，2，3，4，5，6，7，0，1，2
        currentGunIndex = (currentGunIndex + 1) % showIndexs.length;
        console.log(currentGunIndex);

        // 根据滚动的下标，找到当前盒子的下标
        showIndex = showIndexs[currentGunIndex];

        //3.7 让当前的盒子被选中
        $('.goods>li').eq(showIndex).addClass('current').siblings().removeClass('current');

        //3.8 控制启动按钮的旋转
        $('#begin').css({
           transform:'rotate('+ (currentGunIndex-1)*45 +'deg)'
        });

    }, 200);

});