js生成永不重复随机码

最新推荐文章于 2023-09-19 18:25:52 发布

神奇程序员

最新推荐文章于 2023-09-19 18:25:52 发布

阅读量2.5k

点赞数 2

分类专栏：前端 CSS JS HTML

本文链接：https://blog.csdn.net/qq_37581115/article/details/95210306

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

 function createUniqueId(n) {
        var random = function() { // 生成10-12位不等的字符串
            return Number(Math.random().toString().substr(2)).toString(36); // 转换成十六进制
        };
        var arr = [];
        function createId() {
            var num = random();
            var _bool = false;
            arr.forEach(v => {
                if(v === num) _bool = true;
            });
            if(_bool) {
                createId();
            }else {
                arr.push(num);
            }
        }
        var i = 0;
        while(i < n) {
            createId();
            i++;
        }
        return arr;
    }

附带一篇例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆点测试</title>
    <!--jquery CDN-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="app">
        <!--<div class="item-panel" v-for="item in itemList">
            <ul>
                <li v-for="i in item.num" class="other-panel"></li>
                <li v-for="j in (8 - item.num)"></li>
            </ul>
        </div>-->

    </div>
</body>
</html>

$(function () {
    var itemList = [{"num":2},{"num":6},{"num":4},{"num":1},{"num":5},{"num":4},{"num":7}];
    var liPanel = `<li></li>`;
    var liPanelB = `<li class="other-panel"></li>`;
    // 生成随机数数组
    var randomNumberArray = createUniqueId(itemList.length);
    // 渲染页面标签
    for(var item in itemList){
        // 后台返回的数值
        var num = itemList[item].num;
        // 父元素
        var itemPanel = `<div class="item-panel"><ul id="key${randomNumberArray[item]}"></ul></div>`;
        // 生成父元素
        $("#app").append(itemPanel);
        // 生成li
        for(var i = 0; i < num;i++) {
           $("#key"+randomNumberArray[item]+"").append(liPanelB);
        }
        for(var j = 0; j < (8-num);j++) {
            $("#key"+randomNumberArray[item]+"").append(liPanel);
        }
    }
    // 生成永不重复的随机数函数
    function createUniqueId(n) {
        var random = function() { // 生成10-12位不等的字符串
            return Number(Math.random().toString().substr(2)).toString(36); // 转换成十六进制
        };
        var arr = [];
        function createId() {
            var num = random();
            var _bool = false;
            arr.forEach(v => {
                if(v === num) _bool = true;
            });
            if(_bool) {
                createId();
            }else {
                arr.push(num);
            }
        }
        var i = 0;
        while(i < n) {
            createId();
            i++;
        }
        return arr;
    }
});

*{
    margin: 0;
    padding: 0;
}
#app{
    width: 1200px;
    min-height: 200px;
    border: solid 1px #969696;
    box-sizing: border-box;
    padding: 10px;
    margin:  0 auto;
    display: flex;
    /*自动换行*/
    flex-wrap: wrap;
    /*均匀排列*/
    justify-content: space-between;
    align-items: center;
}
#app .item-panel{
    width: 170px;
    height: 80px;
    border: solid 1px red;
    display: flex;
    justify-content: center;
    align-items: center;
}
#app .item-panel ul{
    display: flex;
    justify-content: center;
    align-items: center;
}
#app .item-panel ul li{
    list-style: none;
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 50%;
    border: solid 1px #666666;
    margin-right: 5px;
}
#app .item-panel ul .other-panel{
    background: red;
}

神奇程序员

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js生成永不重复随机码

function createUniqueId(n) { var random = function() { // 生成10-12位不等的字符串 return Number(Math.random().toString().substr(2)).toString(36); // 转换成十六进制 }; var arr = [...
复制链接

扫一扫