今天要分享的是一個簡單的 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