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 相关文章推荐
js实现ArrayList功能附实例代码
Oct 29 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP入门
2006/10/09 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php车辆违章查询数据示例
2016/10/14 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
详解Python3中yield生成器的用法
2015/08/20 Python
深入浅析python定时杀进程
2016/06/06 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
广告学专业自荐信范文
2014/02/24 职场文书
作风整顿剖析材料
2014/09/30 职场文书
综治工作汇报材料
2014/10/27 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Python中22个万用公式的小结
2021/07/21 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
DE1103使用报告
2022/04/05 无线电