javascript實(shí)現(xiàn)仿銀行密碼輸入框效果的代碼
效果:
<!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="http://chabaoo.cn"> 請(qǐng)輸入密碼 <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實(shí)現(xiàn)仿銀行密碼輸入框效果的代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼的實(shí)現(xiàn)示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒有indexOf()方法,可通過下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05js網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí)精確到秒級(jí)
網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí),精確到秒級(jí),和天數(shù)倒計(jì)時(shí)原理一樣,需要的朋友可以參考下2014-02-02JavaScript中使用正則匹配多條,且獲取每條中的分組數(shù)據(jù)
該問題在使用Ajax遠(yuǎn)程獲取某網(wǎng)頁(yè)數(shù)據(jù)時(shí)經(jīng)常遇見 如果目標(biāo)頁(yè)面是XML,就好辦了,實(shí)用XMLDOM可以很輕松完成任務(wù)。2010-11-11