JavaScript通过正则随机生成电话号码

没有接口,就只能自己模拟Json数据了

恰好需要模拟一些电话号码,我又懒得自己随便写,

不如写一个小功能就用来实现随机生成电话号码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机生成电话号码</title>
    <style>
        ul li {
            list-style: none;
        }
    </style>
</head>

<body>
    <button class="btn" value="">开始生成电话号码</button>
    <button class="btn1" value="">停止</button>
    <button class="btn2" value="">清除页面</button>
    <ul class="autoNum"></ul>

    <script>
        var nn = document.getElementsByClassName("autoNum")[0];
        var liLength = document.getElementsByTagName("li");
        var btnOn = document.getElementsByClassName("btn")[0];
        var btnOn1 = document.getElementsByClassName("btn1")[0];
        var btnOn2 = document.getElementsByClassName("btn2")[0];
        var timer;
        
        btnOn.addEventListener('click', function () {
            console.log("function starT");
            timer = setInterval(function () {
                autoNum1();
                autoStop(timer);
            }, 100);
        }, false);

        btnOn1.addEventListener('click', function () {
            clearInterval(timer);
            console.log(liLength.length);
        }, false);

        btnOn2.addEventListener('click', function () {
            clearInterval(timer);
            clearNum();
        }, false);
        //清楚所有的号码
        function clearNum() {
            console.log(liLength.length);
            for (var i= liLength.length-1;i>=0; i--) {
                
                nn.removeChild(nn.childNodes[i]);
            }
        }
        //停止定时器
        function autoStop(timer) {

            if (liLength.length > 10) {
                clearInterval(timer);
                console.log("到11了,STOP");
            }

        }

        //自动生成电话号码
        function autoNum1() {
            console.log("电话号码开始生成")
            var nuM = [];

            //通过随机函数生成电话号码,并存入数组中
            for (var i = 0; i < 11; i++) {
                var num = Math.floor(Math.random() * 10);
                nuM.unshift(num);

            }
            //把数组中的逗号通过join方法消除掉
            nuM = nuM.join("");
            //通过正则判断号码是否为正常电话号码
            if ((/^1[34578]\d{9}$/.test(nuM))) {
                // alert("找到了");
                nuM = nuM.toString();
                var node = document.createElement("li"); //创建一个li节点
                var textnode = document.createTextNode(nuM); //创建一个文本节点内容
                node.appendChild(textnode); //将文本节点内容,添加到li节点里面
                // document.getElementById("test").appendChild(node); //将li节点,添加到test几点下面
                // var createNum = "<li>" + nuM + "</p>";
                nn.appendChild(node);
            }
        }
    </script>
</body>

</html>

 

转载于:https://www.cnblogs.com/WhiteM/p/7206123.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 JavaScript 库 `RegExGen` 和 `vis.js` 来生成和绘制正则表达式可视化。下面是一个简单的示例代码,用于生成正则表达式并将其解析成图形化表示: ```html <!DOCTYPE html> <html> <head> <title>RegEx Visualizer</title> <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> <script src="https://unpkg.com/regexgen"></script> </head> <body> <div> <button onclick="generate()">Generate RegEx</button> </div> <div id="mynetwork"></div> <script> var nodes = []; var edges = []; function generate() { // Generate a random regular expression var regex = new RegExp(RegExGen.generate()); // Create nodes for each part of the expression nodes = []; edges = []; nodes.push({id: 0, label: "Start", shape: "circle"}); for (var i = 0; i < regex.source.length; i++) { nodes.push({id: i + 1, label: regex.source[i]}); } nodes.push({id: regex.source.length + 1, label: "End", shape: "circle"}); // Create edges between nodes for (var i = 0; i < nodes.length - 1; i++) { edges.push({from: i, to: i + 1}); } // Create a network visualization of the expression var container = document.getElementById("mynetwork"); var data = { nodes: nodes, edges: edges }; var options = { layout: { hierarchical: { direction: "LR" } } }; var network = new vis.Network(container, data, options); } </script> </body> </html> ``` 该示例将使用 `RegExGen` 生成随机的正则表达式,并将其解析成一个图形,其中每个字符和节点都是一个节点,而边则表示正则表达式的规则。您可以通过这个示例了解如何使用 `RegExGen` 和 `vis.js` 库来生成和绘制正则表达式可视化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值