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

实现效果

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

思路

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