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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
简述JS控制台的使用
Jul 15 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
vue.js实现简单购物车功能
May 30 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php简单生成随机数的方法
2015/07/30 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
nodejs基础知识
2017/02/03 NodeJs
使用canvas进行图像编辑的实例
2017/08/29 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
使用python模拟高斯分布例子
2019/12/09 Python
python自定义函数def的应用详解
2020/06/03 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
什么是serialVersionUID
2016/03/04 面试题
利用指针变量实现队列的入队操作
2012/04/07 面试题
毕业生自荐书模版
2014/01/04 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
大一学生个人总结
2015/02/15 职场文书