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 28 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
jquery实现倒计时效果
Dec 14 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
新年联欢会主持词
2014/03/27 职场文书
跑操口号
2014/06/12 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
读后感作文评语
2014/12/25 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
Golang 链表的学习和使用
2022/04/19 Golang