今天要分享的是一个简单的 JavaScript 编写和实现的可变动态密码输入控件，可以动态的生产数字键盘并显示，并且可以实现每次点击后密码键盘重新加载，可以手动控制隐藏和显示，手动控制刷新等功能。
相信经常登陆网上银行或者某些游戏网站的朋友应该会经常看到这个控件，其实实现起来原理并不复杂，主要是通过随机生产数字，然后通过 hash 算法，安排数字的位置，这里用了最简单的占位算法，虽然效率比较低（o (n^2)), 但是处理 10 个数字（最差是 55 次）是足够的，如果带上字母键盘和特殊字符的话，建议更换算法。
优先占位算法初始动态密码键盘代码如下：
// 初始化数字键盘
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 代码，因为是简单实现，所以就不做对象封装了
// 定义全局容器 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 < 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 += '';
// 控制换行
if(0 == (i % line)){
strHtml += '
';
}
}
return strHtml
以下是动态密码输入控件演示地址 http://www.lidaren.com/code/jspassctrl/jspassctrl.html
以下是动态密码输入控件演示效果图 效果图 1
效果图 2