• 九宫格抽奖动效

    demo1四宫格：

    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
        name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>四宫格抽奖</title>

</head>

<style>
    html,
    body {
        width: 100%;
        height: 100%;
        max-width: 750px;
        margin: auto;
    }

    .outBox {
        width: 100%;
        height: 60%;
        background: gray;
        position: relative;
        display: flex;
        flex-flow: row wrap;

    }

    .prize {
        width: 44%;
        height: 40%;
        margin: 5% 3%;
        text-align: center;
        font-size: xx-large;
        color: #fff;
        padding-top: 15%;
        box-sizing: border-box;
        border: 6px double #AB945E;
    }

    .prize.active {
        background: goldenrod;
    }

    .btn {
        position: absolute;
        left: 30%;
        bottom: -20%;
        width: 40%;
        text-align: center;
        height: 12%;
        font-size: xx-large;
    }
</style>



<body>

    <div class="outBox" id="lotteryBoxs">

        <div class="prize prize-0 one">一等奖</div>
        <div class="prize prize-1 two">二等奖</div>
        <div class="prize prize-3 four">谢谢参与</div>
        <div class="prize prize-2 three">三等奖</div>


        <button class="btn">开启好运</button>
    </div>




</body>


<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>



    $(document).ready(function () {
        // 转盘的初定义
        var lottery = {
            index: 0, //当前转动到哪个位置，起点位置
            count: 0, //总共有多少个位置
            timer: 0, //setTimeout的ID，用clearTimeout清除
            speed: 10, //初始转动速度
            times: 0, //转动次数
            cycle: 30, //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: 0, //中奖位置
            init: function (id) {
                if ($("#" + id).find(".prize").length > 0) {
                    $lottery = $("#" + id);
                    $units = $lottery.find(".prize");
                    this.obj = $lottery;
                    this.count = $units.length;
                }
            },
            roll: function () {
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".prize").removeClass("active");
                index += 1;
                if (index > count - 1) {
                    index = 0;
                }
                $(lottery).find(".prize-" + this.index).addClass("active");
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };

        // 中奖转动事件
        function roll() {
            lottery.times += 1;
            lottery.roll();
            var prize_site = $("#lotteryBoxs").attr("prize_site");
            if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
                var prize_id = $("#lotteryBoxs").attr("prize_id");
                var prize_name = $("#lotteryBoxs").attr("prize_name");
                console.log(prize_site + "结果")
                //中奖情况的判断--模态框
                if (prize_site == 1 || prize_site == 2 || prize_site == 3) {
                    //已中奖
                    setTimeout(function () {
                        console.log("恭喜你获得" + prize_name)
                    }, 500)
                } else {
                    //未中奖
                    setTimeout(function () {
                        console.log("中奖结果：" + prize_name)
                    }, 500)

                }

                clearTimeout(lottery.timer);
                lottery.prize = -1;
                lottery.times = 0;
                click = false;

            } else {
                if (lottery.times < lottery.cycle) {
                    lottery.speed -= 20;
                } else if (lottery.times == lottery.cycle) {
                    var index = Math.random() * (lottery.count) | 0;
                    lottery.prize = index;
                } else {
                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == lottery.count - 1) || lottery.prize == lottery.index + 1)) {
                        lottery.speed += 90;
                    } else {
                        lottery.speed += 30;
                    }
                }
                if (lottery.speed < 30) {
                    lottery.speed = 30;
                }
                lottery.timer = setTimeout(roll, lottery.speed);
            }
            return false;
        }

        var click = false;

        // 后台数据的调用
        $(function () {
            lottery.init('lotteryBoxs');
            $(".btn").click(function () {
                if (click) {
                    return false;
                } else {
                    lottery.speed = 100;

                    //此处数据应该从接口获取
                    var prizeArr = ["谢谢参与", "一等奖", "二等奖", "三等奖"]
                    var prizeId = Math.floor(Math.random() * (3 - 0 + 1) + 0);
                    var prize_site = prizeId;
                    console.log("位置" + prizeId);
                    $("#lotteryBoxs").attr("prize_site", prize_site);
                    $("#lotteryBoxs").attr("prize_name", prizeArr[prizeId]);
                    roll();
                    click = true;
                    return false;

                }
            });
        })

    });



</script>


</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204

    demo2

    在这里插入图片描述

    <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 实现九宫格抽奖</title>
    <style>
        body {
            background-color: #2c9afc;
        }

        #container {
            width: 330px;
            height: 340px;
            margin: 10% auto;
            border: 7px solid #99d4ff;
            border-radius: 10px;
            padding: 2%;
        }

        #list {
            width: 330px;
            height: 340px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #list li,
        #list span {
            width: 100px;
            height: 100px;
            float: left;
            text-align: center;
            line-height: 100px;
            position: relative;
            background-color: #384f9a;
            margin: 1.4%;
            border-radius: 5px;
        }

        #list li img {
            display: block;
            width: 100%;
            height: 100%;
        }

        #list li .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: pink;
            /* background: url(./666.jpg) no-repeat; */
            /* background-size: cover; */
            display: none;
        }

        #list span:hover {
            cursor: pointer;
            color: orange;
            font-size: 18px;
        }

        #list .active .mask {
            display: block;
        }

        #message {
            line-height: 32px;
            color: #9a9a9a;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50px;
            width: 300px;
            height: 50px;
            margin-left: -150px;
            display: none;
            background: #000;
            color: #fff;
        }
    </style>
</head>

<body>
    <h3 style="text-align:center;margin-top: 10%;color:white">JavaScript 实现九宫格抽奖</h3>
    <div id="container">
        <ul id="list">
            <!-- img标签放奖品图片 -->
            <!-- mask类为抽奖滚动起来的标记 -->
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
            <span id="startbutton" onclick="startlottery()"
                style="background-color:#ff3a59;color:white;font-size: 20px;">开始抽奖</span>
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
            <li><img src="./logo.png" />
                <div class="mask"></div>
            </li>
        </ul>
        <div id="message"></div><!-- 获奖信息展示 -->
    </div>
</body>

<script type="text/javascript">

    var container = document.getElementById('container'),
        li = container.getElementsByTagName('li'),
        span = document.getElementById('startbutton'),
        message = document.getElementById('message'),
        timer = null;
    bReady = true;//定义一个抽奖开关

    var prize = [0, 1, 2, 4, 7, 6, 5, 3];//奖品li标签滚动的顺序

    var num = 0;//num用来存放得到的随机函数，也就是抽中的奖品

    //开始抽奖
    function startlottery() {
        if (bReady) {//当抽奖开关为true的时候，可点击抽奖
            message.style.display = "none";//将获奖信息div隐藏（以防止上次抽奖信息还显示）
            span.style.background = "#ada7a8";
            bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖
            num = getrandomnum(1, 9)//得到一个随机数（即奖品）
            // console.log(num)
            startinit(num);//执行抽奖初始化
        }
    }


    //抽中的奖品 返回1-9的整数，包含1，不包含9
    function getrandomnum(n, m) {
        return parseInt((m - n) * Math.random() + n);
    }


    //抽奖初始化
    function startinit(num) {
        var i = 0;  //定义一个i 用来计算抽奖跑动的总次数
        var t = 200;  //抽奖跑动的速度 初始为200毫秒
        var rounds = 5;  //抽奖转动的圈数
        var rNum = rounds * 8;  //标记跑动的次数（这是一个条件判断分界线）
        timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数


        //抽奖滚动的函数
        function startscroll() {

            //每次滚动抽奖将所有li的class都设为空
            for (var j = 0; j < li.length; j++) {
                li[j].className = '';
            }

            var prizenum = prize[i % li.length];  //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置
            li[prizenum].className = "active";
            i++;

            if (i < rNum - 8) {  //当i小于转(rNum-8次)的数量，t不变还是200毫秒
                timer = setTimeout(startscroll, t);//继续执行抽奖滚动
            } else if (i >= rNum - 8 && i < rNum + num) {
                //t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低
                t += (i - rNum + 8) * 5;
                timer = setTimeout(startscroll, t);//继续执行抽奖滚动
            }
            if (i >= rNum + num) {//当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息

                if (num == 1) {
                    message.innerHTML = "恭喜你中了耳机";
                } else if (num == 2) {
                    message.innerHTML = "恭喜你中了iPad";
                } else if (num == 3) {
                    message.innerHTML = "感谢参与";
                } else if (num == 4) {
                    message.innerHTML = "恭喜你中了洋娃娃";
                } else if (num == 5) {
                    message.innerHTML = "恭喜你中了红色鞋子";
                } else if (num == 6) {
                    message.innerHTML = "恭喜你中了白色手机";
                } else if (num == 7) {
                    message.innerHTML = "恭喜你中了黑色手机";
                } else if (num == 8) {
                    message.innerHTML = "恭喜你中了蓝色鞋子";
                }

                var timer2 = null;
                timer2 = setTimeout(function () {
                    message.style.display = "block";//奖品展示的信息为显示状态
                    span.style.background = "#ff3a59";
                    clearTimeout(timer2);
                }, 1000);
                bReady = true;//当计时器结束后让span标签变为抽奖状态
                clearTimeout(timer);
            }

        }
    }

</script>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219

    demo3

    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* 代码主体 */
        body {
            background: #2c9afc;
        }

        .lotteryBox {
            width: 420px;
            height: 420px;
            border: 7px solid #99d4ff;
            margin: 50px auto;
            border-radius: 10px;
            padding: 20px;
            position: relative;
        }

        .lotteryBox ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
        }

        .lotteryBox ul li {
            width: 120px;
            height: 120px;
            border-radius: 5px;
            overflow: hidden;
        }

        .lotteryBox ul li img {
            width: 100%;
            height: 100%;
            display: block;
        }

        #lotteryBtn {
            cursor: pointer;
            opacity: 0.9;
        }

        #lotteryBtn:hover {
            opacity: 1;
        }

        .active img {
            opacity: 0.4;
        }

        #lotteryBtnStop {
            opacity: 0.3;
        }

        /* 抽奖结果 */
        #lotteryResult {
            position: absolute;
            left: 10%;
            bottom: -67px;
            width: 80%;
            height: 60px;
            background-color: rgba(0, 0, 0, .5);
            text-align: center;
            color: white;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <div class="lotteryBox">
        <ul>
            <li class="item"><img src="images/1.jpg" alt=""></li>
            <li class="item"><img src="images/2.jpg" alt=""></li>
            <li class="item"><img src="images/3.jpg" alt=""></li>
            <li class="item"><img src="images/4.jpg" alt=""></li>
            <li id="lotteryBtn"><img src="images/10.jpg" alt=""></li>
            <li class="item"><img src="images/5.jpg" alt=""></li>
            <li class="item"><img src="images/6.jpg" alt=""></li>
            <li class="item"><img src="images/7.jpg" alt=""></li>
            <li class="item"><img src="images/8.jpg" alt=""></li>
        </ul>
        <div id="lotteryResult">等待抽奖...</div>
    </div>
    <!-- 内部脚本代码 -->
    <script>
        /*
             九宫格位置
            0    1    2

            3   按钮  4

            5    6    7
        */
        var lotteryBtn = document.getElementById('lotteryBtn');//抽奖按钮
        var lotteryLi = document.getElementsByClassName('item');//奖品
        var lotteryResult = document.getElementById('lotteryResult');//抽奖结果

        var directionArray = [0, 1, 2, 4, 7, 6, 5, 3];//奖品li标签滚动的顺序，即抽奖转动方向
        var lotteryIndex = 0;//lotteryIndex用来存放得到的随机数，也就是抽中的奖品
        var lotteryStatus = true;//定义一个抽奖开关
        var timer = null;//定义时间标识符
        //1、点击抽奖按钮
        lotteryBtn.onclick = function () {
            if (lotteryStatus) {
                //2、当抽奖开关为true的时候，可点击抽奖
                lotteryStatus = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖
                lotteryBtn.id = 'lotteryBtnStop';//更换抽奖按钮状态-禁止态
                //3、定义重复性定时器，设置转动效果和速度
                timer = setInterval(function () {
                    lotteryLi[directionArray[lotteryIndex]].className = "item";
                    lotteryIndex++; //将物品连续在一起转动
                    if (lotteryIndex >= 8) {
                        lotteryIndex = 0;
                    }
                    lotteryLi[directionArray[lotteryIndex]].className = "item active"
                }, 100)
                //4、定义一次性延时定时器，设置转动时间
                setTimeout(function () {
                    clearInterval(timer);
                    // 6、添加暗操作，抽奖时阻止抽到最好的物品
                    if (lotteryIndex == 3) {
                        lotteryLi[directionArray[lotteryIndex]].className = "item";
                        lotteryLi[directionArray[lotteryIndex + 1]].className = "item active";
                    }
                    lotteryStatus = true;
                    document.getElementById('lotteryBtnStop').id = 'lotteryBtn'//更换抽奖按钮状态-激活态
                    //5、定义抽奖结束后的提示文本[0,1,2,4,7,6,5,3]
                    if (lotteryIndex == 0) {
                        lotteryResult.innerText = '感谢参与'
                    } else if (lotteryIndex == 1) {
                        lotteryResult.innerText = '恭喜你中了玫瑰'
                    } else if (lotteryIndex == 2) {
                        lotteryResult.innerText = '恭喜你中了盲盒'
                    } else if (lotteryIndex == 3) {
                        lotteryResult.innerText = '恭喜你中了一个小姐姐'/*'恭喜你中了手机'*/
                    } else if (lotteryIndex == 4) {
                        lotteryResult.innerText = '恭喜你中了一个小姐姐'
                    } else if (lotteryIndex == 5) {
                        lotteryResult.innerText = '恭喜你中了耳机'
                    } else if (lotteryIndex == 6) {
                        lotteryResult.innerText = '恭喜你中了一个小哥哥'
                    } else if (lotteryIndex == 7) {
                        lotteryResult.innerText = '恭喜你中了积分'
                    }
                }, Math.round(Math.random() * 3000) + 1000)
            } else {
                console.log('无法点击，正在抽奖中')
            }
        }
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171

    demo4

    在这里插入图片描述

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .luckyDraw {
            width: 420px;
            margin: 0 auto;
        }

        .prize {
            font-size: 30px;
        }

        .lottery {
            width: 240px;
            margin: 30px auto;
            position: relative;
        }

        .lottery li {
            width: 80px;
            height: 80px;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
            line-height: 80px;
            position: absolute;
        }

        .lottery li:nth-of-type(1) {
            left: 0;
            top: 0;
        }

        .lottery li:nth-of-type(2) {
            left: 80px;
            top: 0;
        }

        .lottery li:nth-of-type(3) {
            left: 160px;
            top: 0;
        }

        .lottery li:nth-of-type(4) {
            left: 160px;
            top: 80px;
        }

        .lottery li:nth-of-type(5) {
            left: 160px;
            top: 160px;
        }

        .lottery li:nth-of-type(6) {
            left: 80px;
            top: 160px;
        }

        .lottery li:nth-of-type(7) {
            left: 0;
            top: 160px;
        }

        .lottery li:nth-of-type(8) {
            left: 0;
            top: 80px;
        }

        .lottery li:nth-of-type(9) {
            left: 80px;
            top: 80px;
            cursor: pointer;
            background: gold;
        }

        .active:after {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="luckyDraw">
        <ul class="lottery">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li onclick="roll()">点击抽奖</li>
        </ul>
        <span class="prize">奖品</span>
    </div>

    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8];
        var lottery = document.querySelector('.lottery');
        var prize = document.querySelector('.prize');
        var ali = lottery.querySelectorAll('li');

        var i = 0;//转到哪个位置
        var count = 0;//转圈初始值
        var totalCount = 9;//转动的总圈数
        var speed = 500;//转圈速度，越大越慢
        var minSpeed = 500;
        var timer;
        var isClick = true;
        var index = 5;//指定转到哪个奖品

        function roll() {
            //速度衰减
            speed -= 50;
            if (speed <= 10) {
                speed = 10;
            }
            //每次调用都去掉全部active类名
            for (var j = 0; j < ali.length; j++) {
                ali[j].classList.remove('active');
            }
            i++;
            //计算转圈次数
            if (i >= ali.length - 1) {
                i = 0;
                count++;
            }

            prize.innerHTML = arr[i];//旁边显示当前奖品

            ali[i].classList.add('active');//添加变色类名
            //满足转圈数和指定位置就停止
            if (count >= totalCount && (i + 1) == index) {
                clearTimeout(timer);
                isClick = true;
                speed = minSpeed;
            } else {
                timer = setTimeout(roll, speed);//不满足条件时调用定时器
                //最后一圈减速
                if (count >= totalCount - 1 || speed <= 50) {
                    speed += 100;
                }
            }
        }

        ali[ali.length - 1].onclick = function () {
            if (isClick) {
                count = 0;
                //随机产生中奖位置
                //                  index = Math.floor(Math.random()*arr.length+1);
                roll();
                isClick = false;
            }
        }
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176

    demo5

    在这里插入图片描述

    <!DOCTYPE html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<html>
<style>
    li {
        width: 200px;
        height: 200px;
    }

    .ul {
        width: 606px;
        height: 606px;
    }

    .ul li {
        float: left;
        border: 1px solid #000000;
        list-style: none;
        line-height: 200px;
        text-align: center;
        font-size: 50px;
    }
</style>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div class="ul">
        <li class="li1">1</li>
        <li class="li2">2</li>
        <li class="li3">3</li>
        <li class="li8">8</li>
        <li class="listart">开始</li>
        <li class="li4">4</li>
        <li class="li7">7</li>
        <li class="li6">6</li>
        <li class="li5">5</li>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        var last_index = 0, //上一回滚动的位置
            amplification_index = 0, //轮盘的当前滚动位置,0表示为第一次
            roll_flag = true, //是否允许滚动
            max_number = 8, //轮盘的全部数量
            speed = 300, //速度，速度值越大，则越慢 初始化为300
            finalindex = 3, //最终的奖励
            myInterval = "", //定时器
            max_speed = 40, //滚盘的最大速度
            minturns = 8, //最小的圈数为2
            runs_now = 0; //当前已跑步数
        $(".listart").bind("click", function () {
            //初始化步数
            runs_now = 0;
            //当前可以点击的状态下
            if (roll_flag) {
                roll_flag = false;
                //启动滚盘，注，若是最终后台无返回就不好意思里
                rolling();
            }
        });

        //滚动轮盘的动画效果
        function rolling() {
            myInterval = setTimeout(function () {
                rolling();
            }, speed);
            runs_now++; //已经跑步数加一
            amplification_index++; //当前的加一
            //获取总步数，接口延迟问题，所以最后还是设置成1s以上
            var count_num = minturns * max_number + finalindex - last_index;
            console.log(count_num);
            //上升期间
            if (runs_now <= (count_num / 3) * 2) {
                speed -= 30; //加速
                if (speed <= max_speed) {
                    speed = max_speed; //最高速度为40；
                }
            }
            //抽奖结束
            else if (runs_now >= count_num) {
                clearInterval(myInterval);
                last_index = amplification_index;
                roll_flag = true;

            }
            //下降期间
            else if (count_num - runs_now <= 10) {
                speed += 20;
            }
            //缓冲区间
            else {
                speed += 10;
                if (speed >= 100) {
                    speed = 100; //最低速度为100；
                }
            }
            if (amplification_index > max_number) { //判定！是否大于最大数
                amplification_index = 1;
            }

            //刷新页面
            var strli = ".li";
            strli += amplification_index;
            //全部清除
            $("li").each(function () {
                $(this).css("background", "#ffffff");
            })
            //画颜色
            $(strli).css("background", "red");
        }
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117

    demo6

    在这里插入图片描述

    <!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
        ul {
            margin: 0 auto;
            padding: 0;
            width: 576px;
            height: 513px;
            border: 4px solid red;
            font-size: 0;
        }

        li,
        a {
            display: inline-block;
            width: 190px;
            height: 170px;
            border: 0.5px solid red;
            font-size: 14px;
        }

        ul li .mask {
            width: 190px;
            height: 170px;
            position: relative;
            left: 0;
            top: -172px;
            display: none;
            box-shadow: 0px -5px 10px 0px white inset,
                /* 添加转动时图片的阴影 */
                -5px 0px 10px 0px white inset,
                5px 0px 10px 0px white inset,
                0px 5px 10px 0px white inset;


        }

        img {
            width: 100%;
            height: 100%;
        }

        ul .active .mask {
            display: block;
        }

        #page {
            line-height: 32px;
            color: #9a9a9a;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50px;
            width: 300px;
            height: 50px;
            margin-left: -150px;
            display: none;
            background: #000;
            color: #fff;
        }


        .act .mask {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li><img class="active" src="images/6.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li><img src="images/1.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li><img src="images/2.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li><img src="images/3.jpg" alt="">
            <div class="mask"></div>
        </li>
        <a><img src="images/4.jpg" alt=""></a>
        <li><img src="images/5.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li><img src="images/6.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li><img src="images/7.jpg" alt="">
            <div class="mask"></div>
        </li>
        <li><img src="images/8.jpg" alt="">
            <div class="mask"></div>
        </li>
    </ul>
    <div id="page"></div>
</body>
<script type="text/javascript">

    var arr = [0, 1, 2, 4, 7, 6, 5, 3]  //给图片设置一个转动的方向
    var arrLi = document.getElementsByTagName("li");
    var oBtn = document.getElementsByTagName("a")[0];

    var tim; //时间
    var index = 0
    var swh = true
    oBtn.onclick = function () {

        if (swh) {
            swh = false;
            time = setInterval(function () {
                arrLi[arr[index]].className = "";
                index++;  //将物品连续在一起转动
                if (index >= 8) {
                    index = 0;
                }
                arrLi[arr[index]].className = "active"
            }, 50);  //转动的速度
            setTimeout(function () {
                clearInterval(time);
                if (index == 0) {   //抽奖时阻止抽到最好的物品
                    arrLi[arr[index]].className = "";
                    arrLi[arr[index + 1]].className = "active";
                }

                swh = true;
            }, Math.random() * 500 + 1000)  //转动的时间
        }
    }




</script>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
  • 相关阅读:
    初识java——jdk?环境变量？及关于安装jdk的步骤
    java多线程总结
    python学习笔记——集合
    爱思唯尔——利用AI来改善医疗决策和科研
    今日思考（2） — 训练机器学习模型用GPU还是NUP更有优势（基于文心一言的回答）
    若依启动步骤
    Linux安装MongoDB（简单详细）
    研究生期间工作记录
    数据分析缺失值处理(Missing Values)——删除法、填充法、插值法
    MySQL学习——从命令行调用MySQL 程序
  • 原文地址：https://blog.csdn.net/weixin_50367873/article/details/126130723