js实现模拟银行卡账号输入显示效果


Posted in Javascript onNovember 18, 2015

本文实例讲述了js实现模拟银行卡账号输入显示效果。分享给大家供大家参考,具体如下:

先来看运行效果截图如下:

js实现模拟银行卡账号输入显示效果

在线演示地址如下:

具体代码如下:

<script language="javascript" type="text/javascript">
function www_3water_net (BankNo)
{
if (BankNo.value == "") return;
var account = new String (BankNo.value);
account = account.substring(0,22); /*帐号的总数, 包括空格在内 */
if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
/* 对照格式 */
if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" +
".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
var accountNumeric = accountChar = "", i;
for (i=0;i<account.length;i++)
{
accountChar = account.substr (i,1);
if (!isNaN (accountChar) && (accountChar != " ")) accountNumeric = accountNumeric + accountChar;
}
account = "";
for (i=0;i<accountNumeric.length;i++)
{ /* 可将以下空格改为-,效果也不错 */
if (i == 4) account = account + "-"; /* 帐号第四位数后加空格 */
if (i == 8) account = account + "-"; /* 帐号第八位数后加空格 */
if (i == 12) account = account + "-";/* 帐号第十二位后数后加空格 */
account = account + accountNumeric.substr (i,1)
}
}
}
else
{
account = " " + account.substring (1,5) + " " + account.substring (6,10) + " " + account.substring (14,18) + "-" + account.substring(18,25);
}
if (account != BankNo.value) BankNo.value = account;
}
function checkBankNo (BankNo)
{
if (BankNo.value == "") return;
if (BankNo.value.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
if (BankNo.value.match ("[0-9]{19}") != null)
www_3water_net (BankNo)
}}
function checkEnterForFindListing(e){
var characterCode;
if(e && e.which){
e = e;
characterCode = e.which ;
}
else{
e = event;
characterCode = e.keyCode;
}
if(characterCode == 22){
document.forms[getNetuiTagName("findListingForm")].submit();
return false;
}
else{
return true ;
}}
</script>
只能输入数字,并且每输入4位数字会增加一个 - <br />
<input type="text" value="" size="25" onkeyup="www_3water_net(this)" onkeydown="www_3water_net(this)" name="account" id="account">

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
Vue制作Todo List网页
Apr 26 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 #Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 #Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 #Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 #Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 #Javascript
jquery可定制的在线UEditor编辑器
Nov 17 #Javascript
JS实现选项卡实例详解
Nov 17 #Javascript
You might like
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
django最快程序开发流程详解
2019/07/19 Python
python argparser的具体使用
2019/11/10 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
建筑自我鉴定
2013/10/19 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
大型演出策划方案
2014/05/28 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
雷锋的观后感
2015/06/10 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Python基础之Socket通信原理
2021/04/22 Python