没有接口，就只能自己模拟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>

JavaScript通过正则随机生成电话号码的更多相关文章

  1. (幼儿园毕业)Javascript小学级随机生成四则运算

    软件工程第二次结对作业四则运算自动生成器网页版 一.题目要求 本次作业要求两个人合作完成,驾驶员和导航员角色自定,鼓励大家在工作期间角色随时互换,这里会布置两个题目,请各组成员根据自己的爱好任选一题. ...

  2. PHP随机生成名字 电话号码

    封装函数 随机生成电话号码 function generate_name($count,$type="array",$white_space=false) {$arr = arra ...

  3. JavaScript随机生成信用卡卡号的方法

    这段JS代码根据信用卡卡号产生规则随机生成信用卡卡号,是可以通过验证的,仅供学习参考,请不要用于非法用途,否则后果自负. var visaPrefixList = new Array( "4 ...

  4. 使用javascript随机生成斗地主玩家手牌

    学习javascript估摸着有半个多月了,好歹自己有过编程基础,学的还算轻松,不过js里的面向对象是真的打脑壳,但都但不懂,和我以前学过的c#简直相差太远 今天写了个随机生成斗地主玩家手牌的代码,自 ...

  5. JavaScript随机生成颜色以及十六进制颜色 与RGB颜色值的相互转换

    /** * 随机生成颜色 * @return 随机生成的十六进制颜色 */ function randomColor(){ var colorStr=Math.floor(Math.random()* ...

  6. 【JavaScript】随机生成10个0~100的数字

    随机生成10个0~100不重复的数字(包含0和100): 需要用到的知识点:随机数 去重 下面放代码 <!DOCTYPE html> <html> <head> & ...

  7. 使用JavaScript随机生成数字混合字母的验证码

      <script> // 封装一个随机生成数字的函数 function random(a, b) { var n = Math.round(Math.random() * (a - b) ...

  8. php随机生成验证码代码

    <?php session_start(); //产生一个随机的字符串验证码 $checkcode=""; for ($i=0;$i<4;$i++){ $checkco ...

  9. .Net (MVC) 随机生成验证码

    以前一直对C#的GDI画图部分知识点不怎么用所以忘得差不多了,这两天正好公司要做一个博客系统,其中一个需求就是留言时为了防止恶意攻击必须填写验证码,正好借着这个机会复习了一下,以下是实现代码,写的比较 ...

随机推荐

  1. RobotFramwork自定义库

    这么长时间才知道有RobotFramwork这东西... 感叹之前都干啥去了,感叹公司为啥不用这货? 网上的安装文档都有,就不用自己在记录啦. 感觉在实际实用时,肯定要有自己定义的库啊,不能只用bui ...

  2. Docker 通俗易懂的入门

    这篇转的文章讲的通俗易懂,算个入门的东西了- 转自:http://www.csdn.net/article/2014-07-02/2820497-what's-docker 尽管之前久闻Docker的 ...

  3. 求N维前缀和

    转载自http://blog.csdn.net/jzhang1/article/details/50528549#comments 膜拜 #include <iostream> #incl ...

  4. C#知识点总结：Monitor和Lock以及区别

    Monitor对象 1.Monitor.Enter(object)方法是获取锁,Monitor.Exit(object)方法是释放锁,这就是Monitor最常用的两个方法,当然在使用过程中为了避免获取 ...

  5. AC日记——[SDOI2015]星际战争 洛谷 P3324

    题目描述 3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战. 在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团的阵地,其中第i个巨型机器人的装甲值为Ai.当一个巨型机器人的装甲值 ...

  6. SpringMVC (<context:include-filter>和<context:exclude-filter>的使用)

    eg: 1.现在给定一个项目包的结构: com.yk.controller com.yk.service 2.在SpringMVC.XML有以下的配置: <!--扫描@controller注解- ...

  7. 最简单的window下使用Jenkins来做自动化部署的教程

    今天我们来说一下,如何使用Jenkins+powershell脚本,将我们的.NET CORE的脚本部署到对应的服务器上. 这里我们使用的源码管理工具是TFS.虽然源码管理器比较老旧,但是原理都差不多 ...

  8. git常用语句

    1.安装git,也适用于升级 yum -y install gcc zlib-devel openssl-devel curl-devel \ expat-devel gettext-devel pe ...

  9. html中的列表标签

    1.<dl>定义列表,<dt>定义列表中的项目,<dd>对项目的描述 例: 效果: 2.<ul>无序列表,<li>列表项 例: 效果: 3. ...

  10. Android-->状态栏高度,导航栏高度,Window高度,DecorView高度,heightPixels

    1:DecorView的高度 DecorView的高度代表的是: 整个装饰窗口的高度, 这个高度包括:状态烂的高度和导航栏的高度.(状态栏和导航栏通常叫做装饰窗口, 而ActionBar不属于装饰窗口 ...