当前位置：Gxlcms > JavaScript > javascript实现仿银行密码输入框效果的代码_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：14人阅读

效果：

<!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\" >"+rangenum[i]+"</div>"); 
    } 
    document.writeln("<div class=\"text\">退格清除</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> 
  
   <div id="contain"> 
  <script type="text/javascript"> 
  creatnums(); 
  </ script> 
  </div> 
 </body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

人气教程排行