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 相关文章推荐
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
Javascript中this的用法详解
Sep 22 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 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
一个用于网络的工具函数库
2006/10/09 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js日期联动示例
2014/05/02 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
详解Python中的日志模块logging
2015/06/19 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python 日期与时间转换的方法
2020/08/01 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
校园新闻广播稿
2014/01/10 职场文书
护士长竞聘书
2014/03/31 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
毕业论文致谢信
2015/05/14 职场文书
MySQL约束超详解
2021/09/04 MySQL
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle