jq实现随机抽签不重复小demo

一般...

于 2024-08-27 19:24:38 发布

阅读量841

点赞数 14

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/dhyway/article/details/141610471

版权

纯记录，有能帮助到你的再好不过！这demo可以导入xlsx表格数据进行随机抽取其中的数据，不会重复，抽完可以点重置数据继续当前的数据进行抽，也可重新上传文件更换数据进行抽，上传的数据保存在浏览器的localStorage里面，用到了xlsx0.16.2.js这个工具操作表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random Lottery Without Duplicates</title>
    //这两个包记得正确引进
    <script src="/jq3.5.1.js"></script>
    <script src="/xlsx0.16.2.js"></script>
</head>
<style>
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        border-radius:15px;
        cursor:pointer;
    }
    .span1 {
        position: absolute;
        font-size: 100px;
        margin-top: 250px;
        margin-left: 40%;
    }
</style>
//背景这里照片记得换
<body style="background:url(11.jpg);background-position: center center;background-attachment: fixed;background-size: cover">
<div style="position: absolute;top:90%;left:35%;text-align: center ">
    <button id="button1" class="button">开始点名</button>
    <button id="button3" class="button">清除记录</button>
    <label for="data" style="color: white">随机抽签几个:</label>
    <select id="data" name="data">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <button id="button4"  class="button" disabled style="background-color:red">重置数据</button>
    <input type="file" id="excelFile" accept=".xlsx,.xls" class=""/><br>
    <span style="color: red">上传的抽签数据有效期为30分钟</span>
</div>
<span id="select" class="span1"></span>
<div style=" font-size: 50px; color: #f0a63a ;">抽中记录</div>
<div id="showNames" style="position: absolute;font-size: 20px"></div>
<script>
    $(document).ready(function() {
        //抽签的数据
        var nameList = [];
        //定义未开始
        var flag = true;
        //全局设置定时器
        var time = null;
        //选中的名单
        var value = "";
        //选中的下标
        var indexList = [];
        //一次抽中的条数
        var num = 1;
        $('#data').change(function(){
            // 获取一次抽中的数值
            num = $(this).val();
        });
        $('#excelFile').change(function(e) {
            nameList = []
            if(localStorage.getItem('nameList') != null)
            {
                localStorage.removeItem('nameList');
                localStorage.removeItem('myArrayExpiration');
            }
            var file = this.files[0];
            const allowedExtensions = ['xlsx', 'xls'];
            const fileName = file.name;
            const fileExtension = fileName.split('.').pop().toLowerCase();
            if (!allowedExtensions.includes(fileExtension)) {
                alert(`请上传xlsx或者xls格式的文件`);
                this.value = '';
                return;
            }
            var reader = new FileReader();
            reader.readAsArrayBuffer(e.target.files[0]);
            reader.onload = function(e) {
                var data = new Uint8Array(reader.result);
                var workbook = XLSX.read(data, {type: 'array'});
                // 假设我们只读取第一个sheet
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];
                // 假设我们要获取A列的数据
                var range = XLSX.utils.decode_range(worksheet['!ref']);
                var col = 'A'; // 要获取的列
                if(range.e.r + 1 > 1){
                    //获取A列的第二行开始的所有数据
                    for (var row = (range.s.r + 2); row <= (range.e.r + 1); row++) {
                        var cell = worksheet[col + row];
                        if (cell) {
                            // 读取单元格的值
                            var val = cell.w;
                            nameList.push(val);
                        }
                    }
                    localStorage.setItem('nameList', JSON.stringify(nameList));
                    localStorage.setItem('myArrayExpiration', new Date().getTime() + 1000 *60*30);
                    $('#button4').attr('disabled',false);
                    document.getElementById('button4').style.backgroundColor="#4CAF50";

                }else {
                    alert("不要上传空表！！")
                    document.getElementById('excelFile').value = '';
                }

                if(nameList.length > 0){
                    $('#button1').css({color:"#016dfc"});
                    $("#select").html("")
                }
            };
        });
        $("#button3").click(function (){
           $("#showNames").html("");
        })
        // 检查数组是否过期
        function isArrayExpired() {
            var expiration = localStorage.getItem('myArrayExpiration');
            return expiration !== null && new Date().getTime() > parseInt(expiration);
        }
        $("#button4").click(function (){
            if(isArrayExpired()){
                localStorage.removeItem('nameList');
                localStorage.removeItem('myArrayExpiration');
                alert("抽签数据已过期，请重新上传！！");
            }else {
                nameList = JSON.parse(localStorage.getItem("nameList"));
                $('#button1').attr('disabled',false);
                $("#select").html("");
                alert("抽签数据重置成功！");
            }
        })
        $('#button1').click(function() {
            var $results = $('#results');
            $results.text(''); // 清空之前的结果
            if(flag){
                $(this).css({ color: "#ff0000" }).html("停止点名");
                //每50毫秒执行一次
                time = setInterval(function () {
                    var values = "";
                    //用下标控制随机选中名字
                    if(nameList.length > 0){
                        //选中的人名的下标
                        indexList = getRandomIndices(nameList,num)
                    }else{
                        $('#button1').html("开始点名");
                        alert("当前抽签数据为空，请上传新的数据或者重置数据！");
                        value = ""
                        values =""
                        indexList = [];
                        clearInterval(time);
                        flag = !flag;
                    }
                    $.each(indexList,function (k,v) {
                       values += nameList[v] + `<br>`
                    })
                    value = values
                    $("#select").css({ color: "#016dfc" }).html(values);
                }, 50);
                flag = !flag;
            }else {
                if(value != null && value !== ""){
                    $("#showNames").append(`<div style="margin-right: 10px;color: #f0a63a">${value}</div>`)
                }
                console.log(indexList)
                console.log(nameList)
                //停止后在原来的数组删除选中的值，避免再次选中
                for(var i = indexList.sort().length-1; i >=0;i--){
                    console.log(indexList[i]);
                     nameList.splice(indexList[i],1);
                }
                console.log(nameList)
                // $.each(indexList.sort(),function (k,v) {
                //     console.log(v)
                //     nameList.splice(v,1)
                // })
                $(this).css({color:"#016dfc"}).html("开始点名");
                $("#select").css({ color: "#ff0000" });
                clearInterval(time);
                flag = !flag;
            }
        });
        function getRandomIndices(arr,num) {
            var indices = [];
            var indexs;
            var nm = arr.length > num ? num : arr.length;
            while (indices.length < nm) {
                indexs = Math.floor(Math.random() * arr.length);
                if (indices.indexOf(indexs) === -1) {
                    indices.push(indexs);
                }
            }
            return indices;
        }
    });
</script>
</body>
</html>