2021-05-31 随机抽奖_前端抽奖随机数-优快云博客

这篇博客介绍了如何使用JavaScript实现一个简单的抽奖滚动效果。点击按钮后，中奖列表开始滚动，再次点击则停止并显示中奖结果。代码中利用了定时器和随机数生成来模拟抽奖过程，并通过改变按钮文本来控制抽奖状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现以下功能:

1.点击button按钮后,中奖列表开始滚动,同时button的文本内容从"开始抽奖"变成"停止抽奖";
2.再次点击,滚动停止,中奖结果显示,button的文本内容变回"开始抽奖"

思路:

将所有可能的奖项放进一个数组里,在定时器中让输出的文本内容为数组的某个元素,其中数组的索引设置为随机数

代码:

html:

    <span id="btn">点击抽奖</span>
    <p></p>

css:

        #btn {
            width: 180px;
            height: 60px;
            border: none;
            background: dodgerblue;
            display: block;
            margin: 0 auto;
            color: #fff;
            font-size: 30px;
            border-radius: 6px;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
            }
             
        #btn:active {background: slateblue;}

        p {
            font-size: 80px;
            text-align: center;
            margin: 100px auto;
        }

js:

var btn = document.getElementById("btn");
    var p = document.querySelector("p");
    var onOff = true;
    var arr = ["一等奖",
        "二等奖", "二等奖",
        "三等奖", "三等奖", "三等奖",
        "谢谢参与", "谢谢参与", "谢谢参与", "谢谢参与"
    ];
    var times = '';
    btn.onclick = function() {
        if (onOff) {
            times = setInterval(function() {
                var i = getNum(0, arr.length - 1);
                p.innerHTML = arr[i];
                onOff = false;
            }, 100)
            btn.innerHTML = "停止抽奖";
        } else {
            btn.innerHTML = "开始抽奖";
            clearInterval(times);
            onOff = true;
        }
    }
    function getNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }