李大仁博客

使用JS实现的可变动态密码输入键盘控件源代码

李大仁

今天要分享的是一个简单的JavaScript编写和实现的可变动态密码输入控件，可以动态的生产数字键盘并显示，并且可以实现每次点击后密码键盘重新加载，可以手动控制隐藏和显示，手动控制刷新等功能。

相信经常登陆网上银行或者某些游戏网站的朋友应该会经常看到这个控件，其实实现起来原理并不复杂，主要是通过随机生产数字，然后通过hash算法，安排数字的位置，这里用了最简单的占位算法，虽然效率比较低（o(n^2)),但是处理10个数字（最差是55次）是足够的,如果带上字母键盘和特殊字符的话，建议更换算法。


优先占位算法初始动态密码键盘代码如下：

//初始化数字键盘
function initNum(line){
  var strHtml = "";
  var arr = new Array()
  if(line  10){
    return;
  }
  //编制随机数组
  while(arr.length 

以下是全部的JS代码，因为是简单实现，所以就不做对象封装了


//定义全局容器ID
var OBJID = "layerDisplay";

//对象选择器
function $(obj) {
  return document.getElementById(obj);
}

//加载键盘控件
function load() {
  var id = OBJID;
  //控制内部HTML
  $(id).innerHTML = "";
  //重新加载空间库
  $(id).innerHTML = getControl();
  //显示
  $(id).style.display = "block";
}

//隐藏
function hide(){
  var id = OBJID;
  $(id).style.display = "none";
}

//获取控件
function getControl(){
  var strHtml = "";
  //初始化键盘
  strHtml += initNum(5);
  //OK按钮
  strHtml += "";
  //隐藏按钮 
  strHtml += "";
  //设置按钮并显示
  return strHtml;
}

function addNum(obj){
  var strVal = null;
  //空对象
  if(null == obj){
    return;
  } 
  //空字符串,或不合法字符串
  strVal = obj.value;
  if("" == strVal 
      || 0 == strVal.length) {
    return;
  } 
  //追加字符
  $("txtDisplay").value += strVal
  //
  load()
}

//初始化数字键盘
function initNum(line){
  var strHtml = "";
  var arr = new Array()
  if(line  10){
    return;
  }
  //编制随机数组
  while(arr.length = 0 ; i --) {
     strHtml += '';
          //控制换行
     if(0 == (i % line)){
        strHtml += '
';
     }
  }
  return strHtml



以下是动态密码输入控件演示地址

http://www.lidaren.com/code/jspassctrl/jspassctrl.html


以下是动态密码输入控件演示效果图

效果图1



效果图2
Exit mobile version