JS简单编号生成器实现方法(附demo源码下载)

本文实例讲述了JS简单编号生成器实现方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

编号生成器

编号生成器

前缀： 后缀：
位数：

连续数字 随机字符

~
过滤字符： 多个使用,号分割

0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 包含字符：
随机生成个数：

---

<script> var boNum = true; function fnNum() { document.getElementById('divNum').style.display = 'block'; document.getElementById('divPwd').style.display = 'none'; boNum = true; } function fnPwd() { document.getElementById('divNum').style.display = 'none'; document.getElementById('divPwd').style.display = 'block'; boNum = false; } function run() { var str = ''; var txtCount = parseInt(document.getElementById('txtCount').value); var txtBegin = document.getElementById('txtBegin').value; var txtEnd = document.getElementById('txtEnd').value; var txtChar = document.getElementById('txtChar').value; var numCount = parseInt(document.getElementById('numCount').value); var numBegin = parseInt(document.getElementById('numBegin').value); var numEnd = parseInt(document.getElementById('numEnd').value); var txtLimit = document.getElementById('txtLimit').value; var limit = txtLimit.split(','); if (txtLimit == '') { limit = []; } var count = 0; if (!boNum) { var list = []; for (var i=0; i<txtCount; i++) { var s = ''; for (var j=0; j<numCount; j++) { s += txtChar.charAt(Math.floor(Math.random() * txtChar.length)); } var bo = false; for (var ii=0; ii<list.length; ii++) { if (list[ii] == s) { bo = true; alert(s); break; } } if (bo) continue; str += txtBegin + s + txtEnd + '\r\n'; list.push(s); count++; } } else { for (var i=numBegin; i<numEnd+1; i++) { var s = '' + i; s = (new Array( numCount - s.length + 1 ).join('0')) + s; var bo = false; for (var k=0; k<limit.length; k++) { if (s.indexOf(limit[k]) != -1) { bo = true; break; } } if (bo) continue; str += txtBegin + s + txtEnd + '\r\n'; count++; } } document.getElementById('txtContent').value = str; document.getElementById('spanResult').innerHTML = '生成了 ' + count + ' 个'; } </script> </body> </html> </pre> </div> <p>完整实例代码点击此处<a target="_blank" href="http://xiazai.jb51.cc/201604/yuanma/js-card-no-create-codes(jb51.cc).rar">本站下载</a>。</p> <p>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《<a target="_blank" href="//www.jb51.cc/Special/502.htm">JavaScript切换特效与技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/472.htm">JavaScript查找算法技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/462.htm">JavaScript动画特效与技巧汇总</a>》、《<a target="_blank" href="//www.jb51.cc/Special/439.htm">JavaScript错误与调试技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/297.htm">JavaScript数据结构与算法技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/281.htm">JavaScript遍历算法与技巧总结</a>》及《<a target="_blank" href="//www.jb51.cc/Special/119.htm">JavaScript数学运算用法总结</a>》</p> <p>希望本文所述对大家JavaScript程序设计有所帮助。</p><p class="text-muted" style="margin-top:20px;">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。</p> </div><div class="topcard-tags"><a href="https://www.jb51.cc/tag/shengchengqi/" class="tag_link" target="_blank">生成器</a><a href="https://www.jb51.cc/tag/bianhao/" class="tag_link" target="_blank">编号</a></div></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <h3>相关推荐</h3> <hr /> <div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">让kindeditor显示高亮代码</a></div> <div class="summary">kindeditor4.x代码高亮功能默认使用的是prettify插件，prettify是Google提供的一款源代码语法高亮着色器，它提供一种简单的形式来着色HTML页面上的程序代码，实现方式如下： 首先在编辑器里面插入javascript代码： 确定后会在编辑器插入这样的代码： <pre</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">kindeditor4整合SyntaxHighlighter，让代码亮起来</a></div> <div class="summary">这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮，因为SyntaxHighlighter的应用非常广泛，所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">js如何实现弹出form提交表单？</a></div> <div class="summary">js如何实现弹出form提交表单？（图文+视频）</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">js怎么获取复选框选中的值</a></div> <div class="summary">js怎么获取复选框选中的值</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">js如何实现倒计时跳转页面</a></div> <div class="summary">js如何实现倒计时跳转页面</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">如何用js控制图片放大缩小</a></div> <div class="summary">如何用js控制图片放大缩小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">JS怎么获取当前时间戳</a></div> <div class="summary">JS怎么获取当前时间戳</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">JS如何判断对象是否为数组</a></div> <div class="summary">JS如何判断对象是否为数组</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">JS怎么获取图片当前宽高</a></div> <div class="summary">JS怎么获取图片当前宽高</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">JS对象如何转为json格式字符串</a></div> <div class="summary">JS对象如何转为json格式字符串</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675573.html" title="JS怎么获取图片原始宽高">JS怎么获取图片原始宽高</a></div> <div class="summary">JS怎么获取图片原始宽高</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675566.html" title="怎么在click事件中调用多个js函数">怎么在click事件中调用多个js函数</a></div> <div class="summary">怎么在click事件中调用多个js函数</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675564.html" title="js如何往数组中添加新元素">js如何往数组中添加新元素</a></div> <div class="summary">js如何往数组中添加新元素</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675561.html" title="js如何拆分字符串">js如何拆分字符串</a></div> <div class="summary">js如何拆分字符串</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675559.html" title="JS怎么对数组内元素进行求和">JS怎么对数组内元素进行求和</a></div> <div class="summary">JS怎么对数组内元素进行求和</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675557.html" title="JS如何判断屏幕大小">JS如何判断屏幕大小</a></div> <div class="summary">JS如何判断屏幕大小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675556.html" title="js怎么解析json数据">js怎么解析json数据</a></div> <div class="summary">js怎么解析json数据</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675555.html" title="js如何实时获取浏览器窗口大小">js如何实时获取浏览器窗口大小</a></div> <div class="summary">js如何实时获取浏览器窗口大小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675552.html" title="原生JS实现别踩白块小游戏（五）">原生JS实现别踩白块小游戏（五）</a></div> <div class="summary">原生JS实现别踩白块小游戏（五）</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675551.html" title="原生JS实现别踩白块小游戏（一）">原生JS实现别踩白块小游戏（一）</a></div> <div class="summary">原生JS实现别踩白块小游戏（一）</div> </div></div> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-article-300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">• 让kindeditor显示高亮代码</a></li><li><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">• kindeditor4整合SyntaxHighlighter，让…</a></li><li><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">• js如何实现弹出form提交表单？</a></li><li><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">• js怎么获取复选框选中的值</a></li><li><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">• js如何实现倒计时跳转页面</a></li><li><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">• 如何用js控制图片放大缩小</a></li><li><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">• JS怎么获取当前时间戳</a></li><li><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">• JS如何判断对象是否为数组</a></li><li><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">• JS怎么获取图片当前宽高</a></li><li><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">• JS对象如何转为json格式字符串</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">• 让kindeditor显示高亮代码</a></li><li><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">• kindeditor4整合SyntaxHighlighter，让…</a></li><li><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">• js如何实现弹出form提交表单？</a></li><li><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">• js怎么获取复选框选中的值</a></li><li><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">• js如何实现倒计时跳转页面</a></li><li><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">• 如何用js控制图片放大缩小</a></li><li><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">• JS怎么获取当前时间戳</a></li><li><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">• JS如何判断对象是否为数组</a></li><li><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">• JS怎么获取图片当前宽高</a></li><li><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">• JS对象如何转为json格式字符串</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签<a href="https://www.jb51.cc/all" class="pull-right">更多</a> </label> <div class="topcard-tags"><a href="https://www.jb51.cc/tag/python/" title="python">python</a><a href="https://www.jb51.cc/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="https://www.jb51.cc/tag/java/" title="java">java</a><a href="https://www.jb51.cc/tag/HTML/" title="HTML">HTML</a><a href="https://www.jb51.cc/tag/PHP/" title="PHP">PHP</a><a href="https://www.jb51.cc/tag/reactjs/" title="reactjs">reactjs</a><a href="https://www.jb51.cc/tag/C/" title="C#">C#</a><a href="https://www.jb51.cc/tag/Android/" title="Android">Android</a><a href="https://www.jb51.cc/tag/CSS/" title="CSS">CSS</a><a href="https://www.jb51.cc/tag/Nodejs/" title="Node.js">Node.js</a><a href="https://www.jb51.cc/tag/sql/" title="sql">sql</a><a href="https://www.jb51.cc/tag/rp/" title="r">r</a><a href="https://www.jb51.cc/tag/python3x/" title="python-3.x">python-3.x</a><a href="https://www.jb51.cc/tag/MysqL/" title="MysqL">MysqL</a><a href="https://www.jb51.cc/tag/jQuery/" title="jQuery">jQuery</a><a href="https://www.jb51.cc/tag/c4343/" title="c++">c++</a><a href="https://www.jb51.cc/tag/pandas/" title="pandas">pandas</a><a href="https://www.jb51.cc/tag/flutter/" title="Flutter">Flutter</a><a href="https://www.jb51.cc/tag/angular/" title="angular">angular</a><a href="https://www.jb51.cc/tag/IOS/" title="IOS">IOS</a><a href="https://www.jb51.cc/tag/django/" title="django">django</a><a href="https://www.jb51.cc/tag/linux/" title="linux">linux</a><a href="https://www.jb51.cc/tag/swift/" title="swift">swift</a><a href="https://www.jb51.cc/tag/typescript/" title="typescript">typescript</a><a href="https://www.jb51.cc/tag/luyouqi/" title="路由器">路由器</a><a href="https://www.jb51.cc/tag/JSON/" title="JSON">JSON</a><a href="https://www.jb51.cc/tag/luyouqishezhi/" title="路由器设置">路由器设置</a><a href="https://www.jb51.cc/tag/wuxianluyouqi/" title="无线路由器">无线路由器</a><a href="https://www.jb51.cc/tag/h3c/" title="h3c">h3c</a><a href="https://www.jb51.cc/tag/huasan/" title="华三">华三</a><a href="https://www.jb51.cc/tag/huasanluyouqishezhi/" title="华三路由器设置">华三路由器设置</a><a href="https://www.jb51.cc/tag/huasanluyouqi/" title="华三路由器">华三路由器</a><a href="https://www.jb51.cc/tag/diannaoruanjianjiaocheng/" title="电脑软件教程">电脑软件教程</a><a href="https://www.jb51.cc/tag/arrays/" title="arrays">arrays</a><a href="https://www.jb51.cc/tag/docker/" title="docker">docker</a><a href="https://www.jb51.cc/tag/ruanjiantuwenjiaocheng/" title="软件图文教程">软件图文教程</a><a href="https://www.jb51.cc/tag/C/" title="C">C</a><a href="https://www.jb51.cc/tag/vuejs/" title="vue.js">vue.js</a><a href="https://www.jb51.cc/tag/laravel/" title="laravel">laravel</a><a href="https://www.jb51.cc/tag/springboot/" title="spring-boot">spring-boot</a></div> </div> </div> </div> <div class="row row-sm rbox"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-article-300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container" style="width:1440px;"> <div class="row hidden-xs"> <div class="col-sm-12 col-md-9 col-lg-9 site-link"> <ul class="list-inline"> <li>友情链接:</li><li><a href="https://www.runoob.com/" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank" rel="nofollow">菜鸟教程</a></li><li><a href="https://ai.jb51.cc/" title="ai导航是编程之家旗下ai方向的ai资讯、ai工具类集合导航站。" target="_blank" rel="nofollow">ai导航</a></li></ul> <ul class="list-inline"> <li><a href="https://www.jb51.cc" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="https://www.jb51.cc/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="https://www.jb51.cc/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li> </ul> <div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> <div class="col-sm-12 col-md-3 col-lg-3"><img src="https://www.jb51.cc/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！"> <div class="pull-right">微信公众号搜<span class="text-danger">"程序精选"</span>关注<br />微信扫一扫可直接关注哦！</div> </div> </div> </div> </footer> <script src="https://www.jb51.cc/js/count.js"></script> </body> </html>