原生JS实现的滚动抽奖工具（可设置每个奖品概率、滚动速度、滚动圈数）

最新推荐文章于 2024-05-11 17:08:08 发布

Show_Yeah

最新推荐文章于 2024-05-11 17:08:08 发布

阅读量3.8k

点赞数 7

分类专栏： JS 文章标签：抽奖 JS抽奖抽奖概率原生JS抽奖可设概率抽奖

本文链接：https://blog.csdn.net/qq_32183965/article/details/102817448

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用原生JS实现的滚动抽奖效果，可对每个奖品设置概率

实现以下功能：

1、可针对每个奖品设置概率

2、可设置最少滚动圈数

3、可设置滚动速度

4、可设置从倒数第几个开始减慢速度

演示图

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="prize" id="prize">
    <i>100元现金</i>
    <i>谢谢参与</i>
    <i>50积分</i>
    <i>谢谢参与</i>
    <i>10元优惠券</i>
    <i>谢谢参与</i>
    <i>10元现金</i>
    <i>谢谢参与</i>
    <i>天猫精灵</i>
    <i>谢谢参与</i>
    <i>30元优惠券</i>
    <i>谢谢参与</i>
    <button class="btn" id="btn">抽奖</button>
</div>
<script src="js/index.js"></script>
</body>
</html>

CSS部分（style.css）

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "微软雅黑",Arial,sans-serif;
}
.prize {
    width: 325px;
    height: 325px;
    margin: 50px auto 0 auto;
    position: relative;
    background: lightgoldenrodyellow;
}

.prize i {
    display: block;
    width: 80px;
    height: 80px;
    border: 1px solid #fff;
    font-size: 12px;
    position: absolute;
    text-align: center;
    line-height: 80px;
    background: lightsalmon;
    font-style: normal;
    color: #fff;
}

.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    margin-left: -40px;
    margin-top: -40px;
    background: lightsalmon;
    outline: none;
    font-family: "微软雅黑",Arial,sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}

.prize i.active {
    background: lightcoral;
    color: #fff;
}

.prize i:nth-child(1) {
    left: 0;
}

.prize i:nth-child(2) {
    left: 81px;
}

.prize i:nth-child(3) {
    left: 162px;
}

.prize i:nth-child(4) {
    left: 243px;
}

.prize i:nth-child(5) {
    right: 0;
    top: 81px;
}

.prize i:nth-child(6) {
    right: 0;
    top: 162px;
}

.prize i:nth-child(7) {
    right: 0;
    top: 243px;
}

.prize i:nth-child(8) {
    left: 162px;
    bottom: 0;
}

.prize i:nth-child(9) {
    left: 81px;
    bottom: 0;
}

.prize i:nth-child(10) {
    left: 0;
    bottom: 0;
}

.prize i:nth-child(11) {
    left: 0;
    top: 162px;
}

.prize i:nth-child(12) {
    left: 0;
    top: 81px;
}

JS部分(index.js)

//申明变量
var btn = document.getElementById("btn"),
    prize = document.getElementsByTagName("i"),
    needNum,
    result;


//封装生成随机数函数
function getRandom(n, m) {
    return Math.floor(Math.random() * (m - n + 1) + n);
}


//点击按概率生成随机数
btn.onclick = function () {

    //开始抽奖后限制按钮功能及按钮样式变化
    btn.setAttribute("disabled","disabled");
    btn.style.backgroundColor = "#FFC8AD";
    btn.innerHTML="抽奖中";


    //生成1-100的随机整数，用于分配概率
    var rand = getRandom(1, 100);
    // console.log(rand);


    //分配概率，需保证所有奖品的概率总和为100%
    var rang = 0,  //此数值必须为0，不能变
        rang1 = rang + 1,  //rang1对应下面第一个if，依次类推，修改后面的数值设置概率，如概率13%，则设置数值13
        rang2 = rang1 + 1,
        rang3 = rang2 + 89,  //代表50积分中奖概率为89%
        rang4 = rang3 +1,
        rang5 = rang4 +1,
        rang6 = rang5 + 1,
        rang7 = rang6 + 1,
        rang8 = rang7 + 1,
        rang9 = rang8 + 1,
        rang10 = rang9 + 1,
        rang11 = rang10 + 1,
        rang12 = rang11 + 1;

    if (rand > rang && rand <= rang1) {
        needNum = 1;
        result = "100元现金";
    } else if (rand > rang1 && rand <= rang2) {
        needNum = 2;
        result = "谢谢参与";
    } else if (rand > rang2 && rand <= rang3) {
        needNum = 3;
        result = "50积分";
    } else if (rand > rang3 && rand <= rang4) {
        needNum = 4;
        result = "谢谢参与";
    } else if (rand > rang4 && rand <= rang5) {
        needNum = 5;
        result = "10元优惠券";
    } else if (rand > rang5 && rand <= rang6) {
        needNum = 6;
        result = "谢谢参与";
    } else if (rand > rang6 && rand <= rang7) {
        needNum = 7;
        result = "10元现金";
    } else if (rand > rang7 && rand <= rang8) {
        needNum = 8;
        result = "谢谢参与";
    } else if (rand > rang8 && rand <= rang9) {
        needNum = 9;
        result = "天猫精灵";
    } else if (rand > rang9 && rand <= rang10) {
        needNum = 10;
        result = "谢谢参与";
    } else if (rand > rang10 && rand <= rang11) {
        needNum = 11;
        result = "30元优惠券";
    } else if (rand > rang11 && rand <= rang12) {
        needNum = 12;
        result = "谢谢参与";
    }


    //执行滚动
    var index = 0,  //当前奖品位置下标，起始值为0，不要修改
        roundNum = 1,   //滚动次数，起始值为1，不要修改
        round =  prize.length * 4,  //数值代表滚动圈数
        end = round + needNum;  //随机获得的结束序号
    scrollStart();


    //封装高亮函数
    function active(){
        for (var j = 0; j < prize.length; j++) {  //遍历所有奖品，清除高亮
            prize[j].removeAttribute("class");
        }
        prize[index].className = "active";   //给当前奖品加上高亮
    }


    //封装开始滚动函数
    function scrollStart() {
        var timer1 = setInterval(function () {
            if (roundNum == end-4) {   //滚动到倒数第四个时停止timer1，执行结束滚动函数
                clearInterval(timer1);
                scrollEnd();
                // console.log("index:"+index+"roundNum:"+roundNum+"end:"+end)
            }
            active();
            roundNum++;
            index++;
            if (index > 11) index = 0;
        }, 65)  //此数值代表滚动速度，越小越快
    }


    //封装结束滚动函数
    function scrollEnd() {
        var timer2 = setInterval(function () {
            if (roundNum == end) {  //当滚动的次数跟随机获得的结束序号一致时，停止timer2
                clearInterval(timer2);
                setTimeout(function () {  //延时弹出弹框
                    var isThank = result.indexOf("谢");  //查找结果里是否包含字符“谢”
                    if ( isThank == -1) {  //没有包含返回结果-1，则说明已中奖，返回中奖结果
                        alert("恭喜你获得："+result);
                    }else {
                        alert("你没抽中奖品，再接再厉！")
                    }
                    //恢复按钮功能及样式
                    btn.removeAttribute("disabled");
                    btn.style.backgroundColor = "lightsalmon";
                    btn.innerHTML = "抽奖";
                },400)  //此数值代表弹出延时多少毫秒弹出
            }
            active();
            roundNum++;
            index++;
            if (index > 11) index = 0;
        },220)  //次数值代表最后几个滚动的速度，约小越快
    }


};

Show_Yeah

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现的滚动抽奖工具（可设置每个奖品概率、滚动速度、滚动圈数）

使用原生JS实现的滚动抽奖效果，可对每个奖品设置概率实现以下功能：1、可针对每个奖品设置概率2、可设置最少滚动圈数3、可设置滚动速度4、可设置从倒数第几个开始减慢速度演示图HTML部分<!DOCTYPE html><html lang="en"><head> <meta charse...
复制链接

扫一扫