2021-06-28 可设置中奖人数的随机不重复抽奖

最新推荐文章于 2024-11-27 15:14:51 发布

原创最新推荐文章于 2024-11-27 15:14:51 发布 · 811 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#定时器 #节点的增删改查 #随机数 #js #javascript

js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个能够设置中奖人数的随机抽奖程序，利用JavaScript动态生成候选人列表，通过定时器实现不重复抽取中奖者，当达到预设的中奖人数时自动停止抽奖。

<div class="box">
    <input type="text" class="text" placeholder="请输入抽奖人数">
    <ul>
        <!-- <li class="current"></li> -->
    </ul>
    <h1>本期幸运儿是:<span></span></h1>
    <div class="btn">
        <input type="button" value="开始">
        <input type="button" value="停止">
    </div>
</div>

css

*{margin:0;padding:0;}
.box{width: 860px;height: 550px;border:solid #ddd;margin:10px auto;position:relative;}
li{list-style-type: none;float: left;width: 100px;height: 50px;border:solid #ddd;margin:10px;text-align: center;line-height: 50px;}
.btn{position: absolute;left:50%;bottom:20px;transform: translateX(-50%);}
.text{width: 150px;height: 30px;margin:10px;}
.btn>input{width: 80px;height: 40px;margin-right: 20px;}
h1{width: 600px;float: left;font-size: 16px;margin-left: 15px;margin-top: 20px;}
.current{background-color: orangered;}

js

//设置中奖候选人
var array = ["宋江", "卢俊义", "吴用", "公孙胜", "关胜",
    "林冲", "花荣", "武松", "鲁智深", "戴宗",
    "史进", "李逵", "阮小二", "李俊", "燕青",
    "扈三娘", "时迁", "孙二娘", "顾大嫂", "阮小五",
    "阮小七", "雷横", "柴进", "呼延灼", "关胜",
    "高俅", "高太尉", "西门庆", "李师师", "潘金莲"
];

//获取节点
var text = document.querySelector(".text");
var input = document.querySelectorAll(".btn>input");
var span = document.querySelector("span");
var ul = document.querySelector("ul");
var timer = null;

//为每一个中奖候选人动态创建li节点并追加为ul的子节点
for (var i = 0; i < array.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = array[i]; //不能写成li[i].innerHTML:生成的是单个节点
    ul.appendChild(li);
}

//点击开始按钮
input[0].onclick = function() {
        var num = text.value; //输入的中奖人数:文档输入框中输入的数字
        var arr = []; //声明一个空数组,准备去接中奖名字
        var score = 0,count = 0; //统计摇奖跳转次数 统计中奖人数
        clearInterval(timer);
        fn();

        function fn() {
            timer = setInterval(function() {
            	//摇奖
                var random = getNum(0, array.length); //获取一个0-array.length的随机数
                var li_select = document.querySelector(".current"); //current设置了橘色样式
                if (li_select != null) li_select.className = "";
                ul.children[random].className = "current"; //摇奖:每50ms就让橘色框在随机的li之间跳转
                score++; //每50ms自增一次
                
                //每1.5s选出一个中奖者
                if (score == 30) { 
                    var onOff = true;
                    var name = ul.children[random].innerHTML; //提取出中奖者的名字:1.5s时刻橘框停留的li位置
                    //中奖的名字不能再次中奖
                    arr.forEach(function(val) {if (name == val) onOff = false; });
                    
                	//将中奖的名字push进arr数组里,并统计已中奖人数
                    if (onOff) {
                        arr.push(name); 
                        count++;
                    }
                    score = 0; //选好名字后清零,重新累计到下一个30次
                    clearInterval(timer); //选好名字后必须清空定时器
                    timer = setInterval(() => {
                        fn();
                        span.innerHTML = arr; //将中奖名字输出到<span>的文本内容
                        if (count >= num) { //已选出的中奖人数和设置的中奖人数的比较
                            clearInterval(timer);
                            ul.children[random].className = "";
                        }
                    }, 2000);
                }
            }, 50);
        }
    }
//获取随机数
function getNum(min, max) {return Math.round(Math.random() * (max - min) + min);}