javascript实现仿银行密码输入框效果的代码


Posted in Javascript onDecember 13, 2007

效果:

javascript实现仿银行密码输入框效果的代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 <title> 密码输入框 </title> 
 <meta name="generator" content="Microsoft FrontPage 6.0"/> 
 <meta name="author" content="lin.x"/> 
 <meta name="keywords" content=""/> 
 <meta name="description" content=""/> 
 <style type="text/css"> 
 <!-- 
 *{font-size:12px;font-family:verdana;color:#339933;} 
#contain{margin-left:64px;padding:3px;padding-bottom:7px;border:1px solid #339933;border-top:7px solid #339933;width:125px;height:145px;display:none;} 
[xmlns] #contain{padding-left:5px;width:113px;} 
 .nbox,.text{float:left;border:1px solid #339933;border-top:2px solid #339933;} 
 .nbox{margin:5px;} 
 .text{margin:5px 4px;} 
 a{padding:4px 8px;text-decoration:none;line-height:2;} 
 a:hover{background-color:#ACE89B;} 
 .text a{padding:5px 4px 4px 3px;} 
 --> 
 </style> 
 <script type="text/javascript"> 
function rand() { 
  return Math.floor(Math.random()*10); 
} 
var rangenum = new Array(); 
var tem; 
for (var i = 0; i<10; i++) { 
  rangenum.push(i); 
} 
for (var i = 0; i<10; i++) { 
  var a = rand(); 
  var b = rand(); 
  tem = rangenum[a]; 
  rangenum[a] = rangenum[b]; 
  rangenum[b] = tem; 
} 
function creatnums() { 
  for (i=0; i<rangenum.length; i++) { 
    document.writeln("<div class=\"nbox\" ><a href=\"#\"onclick=\"input("+rangenum[i]+")\">"+rangenum[i]+"</a></div>"); 
  } 
  document.writeln("<div class=\"text\"><a href=\"#\" onclick='input(-1)'>退格</a><a href=\"#\" onclick=\"clearinput()\">清除</a></div>"); 
} 
function input(i) { 
  var pwd=document.form.pwd.value; 
  if (pwd.length<8||i == '-1') { 
    if (i == '-1') { 
      document.form.pwd.value = pwd.substring(0,pwd.length-1); 
    } else { 
      document.form.pwd.value = pwd+i; 
    } 
    clearTimeout(timer); 
    timer=setTimeout("hiddenpad();document.getElementById('OK').focus()",4000) 
     
  } 
  else{clearTimeout(timer);alert("最多输入8位!");hiddenpad();} 
} 
function clearinput() { 
  document.form.pwd.value=""; 
} 
var timer 
function showpad(){ 
  document.getElementById('contain').style.display="block"; 
  clearTimeout(timer) 
  timer=setTimeout("hiddenpad()",3000) 
} 
function hiddenpad(){ 
  document.getElementById('contain').style.display="none"; 
} 
function noinput(){ 
var pwd=document.form.pwd.value; 
document.form.pwd.value = pwd.substring(0,pwd.length-2); 
} 
 </script> 
 </head> 
 <body> 
 <form name="form" action="https://3water.com"> 
  请输入密码 
 <input type="password" name="pwd" onclick="showpad()" onkeydown="return false;" size="8"> 
 <input type="button" value=" OK " onclick="hiddenpad()" id="OK"> 
</form> 
  <div id="contain"> 
 <script type="text/javascript"> 
 creatnums(); 
 </script> 
 </div> 
 </body> 
</html>

以上所述是小编给大家介绍的javascript实现仿银行密码输入框效果的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 #Javascript
我见过最全的个人js加解密功能页面
Dec 12 #Javascript
文本链接逐个出现的js脚本
Dec 12 #Javascript
JavaScript创建命名空间(namespace)的最简实现
Dec 11 #Javascript
js模拟实现Array的sort方法
Dec 11 #Javascript
看了就知道什么是JSON
Dec 09 #Javascript
javascript while语句和do while语句的区别分析
Dec 08 #Javascript
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
浅谈Express异步进化史
2017/09/09 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
法人委托书范本
2014/04/04 职场文书
法学专业求职信
2014/07/15 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
讲文明倡议书
2015/04/29 职场文书
培养联系人考察意见
2015/06/01 职场文书