效果：
<!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://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>
以上所述是小编给大家介绍的javascript实现仿银行密码输入框效果的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
