页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

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

发布：dxy 发布日期：2007-12-13 20:03:04 字体：[增加减小] 类型：转载

效果：

点击运行可以看到效果:

<!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"> 
   
  </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="http://www.jb51.net"> 
   请输入密码 
 <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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：javascript 实现仿银行密码输入框效果

百度中搜索更多的关于javascript实现仿银行密码输入框效果的代码内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：javascript轻松控制表格列样式的脚本代码
下一篇文章：js方块躲避游戏代码

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行