jQuery实现抽奖

知识点

jQuery方法的连用
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 300px;
            height: 300px;
            border: 1px solid orange;
            margin: 100px auto;
        }

        .goods li {
            width: 100px;
            height: 100px;
            /*background-color: red;*/
            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="" alt=""></li>
        <li class="current"><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li id="begin"><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
    </ul>
</div>

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        // 0. 数据源
        var goodsNames = ['耳机', '平板电脑', '感谢参与', '平板鞋', 'begin', '特步', '玩偶', 'ipone手机', '安卓手机'];
        var goodsImgs = [];
        for (var i = 1; i < 10; i++) {
            goodsImgs.push('images/' + i + '.png');
        }

        // 1. 展示数据源
        $('.goods>li>img').each(function (index, value) {
            $(this).attr('src', goodsImgs[index]);
        });

        // 2. 监听按钮的点击
        var currentGunIndex = 0;
        var showIndex = 0;
        $('#begin').click(function () {
            // 2.0 清除定时器
            clearInterval(timer);
            // 2.1 控制滚动的次数 1 <= x <= 2
            var count = Math.floor(Math.random() * 8) + 8;
            console.log(count);
            // 滚动
            // 2.2 制定滚动的路径
            var showIndexs = [0, 1, 2, 5, 8, 7, 6, 3];
            // 2.3  根据路径往回滚
            var timer = setInterval(function () {
                // 2.4 判断
                if(count <= 0){
                    if(showIndex === 2){ // 没有中奖
                        alert('运气不好哦~');
                    }else {
                       alert('恭喜中奖, 奖品是:' + goodsNames[showIndex]);
                    }
                    // 2.5 清除定时器
                    clearInterval(timer);
                    return;
                }

                // 2.5 条件
                count --;
                // 滚动的循环 1,2,3,4,5,6,7,0,1,2,3....
                currentGunIndex = (currentGunIndex + 1) % showIndexs.length;
                console.log(currentGunIndex);
                // 从滚动路径中找到当前盒子的下标
                showIndex = showIndexs[currentGunIndex];
                // console.log(showIndex);

                // 2.6 让当前的盒子被选中
                $('.goods>li').eq(showIndex).addClass('current').siblings().removeClass('current');
                // 2.7 控制启动按钮的旋转
                $('#begin').css({
                   'transform': 'rotate(' + (currentGunIndex - 1) * 45 +'deg)'
                });
            }, 200);
        });
    });
</script>
</body>
</html>
运行效果

在这里插入图片描述
KaiSarH
发布了270 篇原创文章 · 获赞 123 · 访问量 1万+
私信关注
知识点

代码

运行效果

猜你喜欢
