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


Posted in Javascript onDecember 13, 2007

效果:

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://3water.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"> 
 <script type="text/javascript"> 
 creatnums(); 
 </script> 
 </div> 
 </body> 
</html>

以上所述是小编给大家介绍的javascript实现仿银行密码输入框效果的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 #Javascript
我见过最全的个人js加解密功能页面
Dec 12 #Javascript
文本链接逐个出现的js脚本
Dec 12 #Javascript
JavaScript创建命名空间(namespace)的最简实现
Dec 11 #Javascript
js模拟实现Array的sort方法
Dec 11 #Javascript
看了就知道什么是JSON
Dec 09 #Javascript
javascript while语句和do while语句的区别分析
Dec 08 #Javascript
You might like
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
jquery遍历checkbox介绍
2014/02/21 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python操作csv文件实例详解
2017/07/31 Python
python对html过滤处理的方法
2018/10/21 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
详解python中的index函数用法
2019/08/06 Python
python sorted方法和列表使用解析
2019/11/18 Python
python 串行执行和并行执行实例
2020/04/30 Python
毕业生实习鉴定
2013/12/11 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
经销商订货会主持词
2014/03/27 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
骨干教师事迹材料
2014/12/17 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS