您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

目录

        • 实现效果
        • 思路
        • 代码
          • html
          • css
        • 效果

实现效果

输入中奖人数,点击开始,可以从候选名字中不重复地得到对应数量中奖幸运儿

思路

1.动态创建ul下的li节点并让其文本内容为每个候选名字
2.定时器中随机获取的每个li名字输出到页面
3.当获取的名字等于带=待获取的中奖人数的数量时清除定时器

代码

html
<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);}

效果

在这里插入图片描述


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进