javascript實(shí)現(xiàn)仿銀行密碼輸入框效果的代碼
更新時(shí)間：2007年12月13日 20:03:04 投稿：mdxy-dxy
這篇文章通過(guò)實(shí)例代碼給大家介紹了javascript實(shí)現(xiàn)仿銀行密碼輸入框效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
效果：
<!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://www.dbjr.com.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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js指定日期增加指定月份的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
本文主要介紹了js清除瀏覽器緩存的幾種方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
廢話少說(shuō)，直接上Code,對(duì)IE與FF下的差異，均在代碼中有相關(guān)的注解2010-03-03
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)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
如何判斷一個(gè)對(duì)象或一個(gè)值是否是一個(gè)數(shù)組,在面試或工作中我們常常會(huì)遇到這個(gè)問(wèn)題,既然出現(xiàn)頻率高,想著還是做個(gè)整理,所以這篇文章主要給大家匯總介紹了關(guān)于JavaScript判斷是否為數(shù)組的各種方法,需要的朋友可以參考下2021-08-08
本篇文章主要介紹了webpack 樣式加載的實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒(méi)有indexOf()方法，可通過(guò)下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05
js網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí)精確到秒級(jí)
網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí)，精確到秒級(jí)，和天數(shù)倒計(jì)時(shí)原理一樣,需要的朋友可以參考下2014-02-02
JavaScript中使用正則匹配多條，且獲取每條中的分組數(shù)據(jù)
該問(wèn)題在使用Ajax遠(yuǎn)程獲取某網(wǎng)頁(yè)數(shù)據(jù)時(shí)經(jīng)常遇見(jiàn) 如果目標(biāo)頁(yè)面是XML，就好辦了，實(shí)用XMLDOM可以很輕松完成任務(wù)。2010-11-11
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09