aspx/html实现前端页面模拟抽奖（一次内无重复）

aspx页面和html页面的差别并不太大，最近临近年关，很多公司都会有抽奖活动，闲来无事自己试着弄了一个前端的抽奖，踩了很多坑坑，由于一次抽取不能重复，这里采取的是先随机抽选完毕，然后再剔除重复重新抽取的方法，比较low，有兴趣的可以自己优化一下。

效果图如下（本人设计最多抽奖人数为80，最大奖号数2000）

抽奖之前：

抽奖之后：

界面设计比较随意~~要好看找美工吧！

贴代码之前先说说自己是怎么想的，首先是需要实现每个数字框的设计和框的动态添加，这里使用的是input作为每个数字的框（<input class = "showInpt" type = "text" value = "000" id = "inptX" disabled></input>），由于这里是不给输入的，所以这里设计为disable然后把背景边框的样式都给去掉，用css重新设计一下：

<style>
         .showInpt
         {
             width:80px;
             padding:10px;
             font-size:25px; 
             text-align:center;
             color:#fff;
             background:transparent;
         }
          input:disabled
         {
             appearance: none;
             -webkit-appearance: none;
             background-color :transparent;
	         opacity:1;
	         -webkit-opacity:1;
             border:none;
          }
</style>

然后script是根据layui提供的选择器，监听要抽多少名额，然后初始化这些input框框,这里是5个作为一排，然后换行

layui.use(['form', 'element', 'layer'], function () {
        var $ = layui.jquery,
                element = layui.element,
                form = layui.form;
        var layer = layui.layer;
        form.render("select");
        form.on('select(test3)', function (data) {  //抽奖号数1-X
            console.log("test3 = " + data.value);
            if (data.value != "") {
                LDMAXNumber = data.value;
            }

        });
        form.on('select(test2)', function (data) {  //动态生成所需input框
            console.log("test2 = " + data.value);
            var num = eval(data.value);
            $("#showNumDiv").html("");
            var info = "";
            for (var i = 1; i <= num; i++) {
                var id = "inpt" + i;
                info += '<input class = "showInpt" type = "text" value = "000" id = "' + id + '" disabled></input>';
                if (i % 5 == 0) {
                    info += '<br>';
                }
            }
            $("#showNumDiv").html(info);
        });
    });

接下来最重要的部分就是怎么让数