无为清净楼资源网 Design By www.qnjia.com

效果:


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

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

标签:
js,密码输入框效果,js,银行密码输入框

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。