资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20rand()%20%7B%20%0D%0A%20%20%20%20return%20Math.floor(Math.random()*10)%3B%20%0D%0A%7D%20%0D%0Avar%20rangenum%20%3D%20new%20Array()%3B%20%0D%0Avar%20tem%3B%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%3C10%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20rangenum.push(i)%3B%20%0D%0A%7D%20%0D%0Afor%20(var%20i%20%3D%200%3B%20i%3C10%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20var%20a%20%3D%20rand()%3B%20%0D%0A%20%20%20%20var%20b%20%3D%20rand()%3B%20%0D%0A%20%20%20%20tem%20%3D%20rangenum%5Ba%5D%3B%20%0D%0A%20%20%20%20rangenum%5Ba%5D%20%3D%20rangenum%5Bb%5D%3B%20%0D%0A%20%20%20%20rangenum%5Bb%5D%20%3D%20tem%3B%20%0D%0A%7D%20%0D%0Afunction%20creatnums()%20%7B%20%0D%0A%20%20%20%20for%20(i%3D0%3B%20i%3Crangenum.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20document.writeln(%22%3Cdiv%20class%3D%5C%22nbox%5C%22%20%3E%3Ca%20href%3D%5C%22%23%5C%22onclick%3D%5C%22input(%22%2Brangenum%5Bi%5D%2B%22)%5C%22%3E%22%2Brangenum%5Bi%5D%2B%22%3C%2Fa%3E%3C%2Fdiv%3E%22)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20document.writeln(%22%3Cdiv%20class%3D%5C%22text%5C%22%3E%3Ca%20href%3D%5C%22%23%5C%22%20onclick%3D'input(-1)'%3E%E9%80%80%E6%A0%BC%3C%2Fa%3E%3Ca%20href%3D%5C%22%23%5C%22%20onclick%3D%5C%22clearinput()%5C%22%3E%E6%B8%85%E9%99%A4%3C%2Fa%3E%3C%2Fdiv%3E%22)%3B%20%0D%0A%7D%20%0D%0Afunction%20input(i)%20%7B%20%0D%0A%20%20%20%20var%20pwd%3Ddocument.form.pwd.value%3B%20%0D%0A%20%20%20%20if%20(pwd.length%3C8%7C%7Ci%20%3D%3D%20'-1')%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(i%20%3D%3D%20'-1')%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.form.pwd.value%20%3D%20pwd.substring(0%2Cpwd.length-1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.form.pwd.value%20%3D%20pwd%2Bi%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20clearTimeout(timer)%3B%20%0D%0A%20%20%20%20%20%20%20timer%3DsetTimeout(%22hiddenpad()%3Bdocument.getElementById('OK').focus()%22%2C4000)%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%7BclearTimeout(timer)%3Balert(%22%E6%9C%80%E5%A4%9A%E8%BE%93%E5%85%A58%E4%BD%8D!%22)%3Bhiddenpad()%3B%7D%20%0D%0A%7D%20%0D%0Afunction%20clearinput()%20%7B%20%0D%0A%20%20%20document.form.pwd.value%3D%22%22%3B%20%0D%0A%7D%20%0D%0Avar%20timer%20%0D%0Afunction%20showpad()%7B%20%0D%0A%20%20%20document.getElementById('contain').style.display%3D%22block%22%3B%20%0D%0A%20%20%20%20clearTimeout(timer)%20%0D%0A%20%20%20%20timer%3DsetTimeout(%22hiddenpad()%22%2C3000)%20%0D%0A%7D%20%0D%0Afunction%20hiddenpad()%7B%20%0D%0A%20%20%20document.getElementById('contain').style.display%3D%22none%22%3B%20%0D%0A%7D%20%0D%0Afunction%20noinput()%7B%20%0D%0Avar%20pwd%3Ddocument.form.pwd.value%3B%20%0D%0Adocument.form.pwd.value%20%3D%20pwd.substring(0%2Cpwd.length-2)%3B%20%0D%0A%7D%20%0D%0A%20%3C%2Fscript%3E"> </head> <body> <form name="form" action="http://www.glzy8.com"> 请输入密码 <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"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20creatnums()%3B%20%0D%0A%20%20%3C%2Fscript%3E"> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程