Home > 语言编程 > 使用JS实现的可变动态密码输入键盘控件源代码

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

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

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//初始化数字键盘
function initNum(line){
  var strHtml = "";
  var arr = new Array()
  if(line < 1 || line > 10){
    return;
  }
  //编制随机数组
  while(arr.length < 10){
    //取0-9之间的整数
    var num = Math.floor(10*Math.random());
    //遍历数组找到空位
    var flag = false;
    for(var i=0 ; i < arr.length ;i++){
        if(arr[i] == num){
            flag = true;
            break;
        }
    }
    if(!flag){
        arr[arr.length] = num;
    }
  }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//定义全局容器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 += "<input type=\"button\" id=\"btnReload\" name=\"btnReload\" value=\"Rest\" class=\"command\" onclick=\"load()\"/>";
  //隐藏按钮 
  strHtml += "<input type=\"button\" id=\"btnHide\" name=\"btnHide\" value=\"Hide\" class=\"command\" onclick=\"hide()\"/>";
  //设置按钮并显示
  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 < 1 || line > 10){
    return;
  }
  //编制随机数组
  while(arr.length < 10){
    //取0-9之间的整数
    var num = Math.floor(10*Math.random());
    //遍历数组找到空位
    var flag = false;
    for(var i=0 ; i < arr.length ;i++){
        if(arr[i] == num){
            flag = true;
            break;
        }
    }
    if(!flag){
        arr[arr.length] = num;
    }
  }
 
  //输出按钮列表
  for(var i = 9; i >= 0 ; i --) {
     strHtml += '<input type=\"button\" class=\"number\" value=\"'
             + arr[i]
             + '\" onclick = \"addNum(this)\" />';
          //控制换行
     if(0 == (i % line)){
        strHtml += '<br />';
     }
  }
  return strHtml

以下是动态密码输入控件演示地址
http://www.lidaren.com/code/jspassctrl/jspassctrl.html

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

Categories: 语言编程 Tags: ,
  1. No comments yet.
  1. No trackbacks yet.