JS简单编号生成器实现方法(附demo源码下载)
更新时间：2016年04月05日 11:53:02 作者：xiao张
这篇文章主要介绍了JS简单编号生成器实现方法,涉及JavaScript针对表单与字符串操作的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了JS简单编号生成器实现方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编号生成器</title>
</head>
<body>
<h1>编号生成器</h1>
<div>
前缀：<input id="txtBegin" type="text" value="" /> 后缀：<input id="txtEnd" type="text" value="" />
<br />
位数：<input id="numCount" type="number" value="5" />
</div>
<div style="margin:10px 0;">
<label><input type="radio" name="a1" onclick="fnNum();" checked /> 连续数字</label>
<label><input type="radio" name="a1" onclick="fnPwd();" /> 随机字符</label>
</div>
<div id="divNum">
范围：<input id="numBegin" type="number" value="0" /> ~ <input id="numEnd" type="number" value="100" />
<br />
过滤字符：<input id="txtLimit" type="text" value="" /> 多个使用,号分割
</div>
<div id="divPwd" style="display:none;">
<h3>0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
包含字符：<input id="txtChar" type="text" value="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" style="width:600px;" />
<br />
随机生成个数：<input id="txtCount" type="number" value="100" />
</div>
<input type="button" value="生成号码" onclick="run();" /> <span id="spanResult"></span>
<hr />
<textarea id="txtContent" style="width:600px; height:500px;">
</textarea>
<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>
完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了js实现车辆管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了JavaScript实现同时调用多个函数的方法,以一个简单实例分析了JavaScript同时调用两个函数的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
浅谈js图片前端预览之filereader和window.URL.createObjectURL
下面小编就为大家带来一篇浅谈js图片前端预览之filereader和window.URL.createObjectURL。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
下面小编就为大家带来一篇在一个页面重复使用一个js函数的方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
这篇文章主要为大家详细介绍了BootStrap TreeView使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
由于uniapp暂无钉钉授权登录所以本文将钉钉扫码登录作为网页嵌入uniapp，最终实现钉钉扫码登录app，本文通过实例代码给大家介绍uniapp钉钉扫码登录功能，感兴趣的朋友一起看看吧2021-12-12
网上抓的一个特效...2007-05-05
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
IFrame高度的设置问题一直都是前端的噩梦而且还要兼容各主流浏览器更是难上加难了，下面与大家分享下一个不错的技巧，感兴趣的你可以参考下哈2013-06-06
Popup对象实现右键菜单...2006-09-09
在网站中加入网页助手小精灵，当用户访问网站时，向用户问好，或是传递一些网站的重要信息，给用户带来极好的体验感，那么基于js代码是如何调用网页助手小精灵的呢？下面跟着脚本之家小编一起学习吧2016-06-06
最新评论