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

今天要分享的是一个简单的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 br>
//取0-9之间的整数

var num = Math.floor(10*Math.random());

//遍历数组找到空位

var flag = false;

for(var i=0 ; i < arr length ibr>
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 br>
//取0-9之间的整数

var num = Math.floor(10*Math.random());

//遍历数组找到空位

var flag = false;

for(var i=0 ; i < arr length ibr>
if(arr[i] == num){

flag = true;

break;

}

}

if(!flag){

arr[arr.length] = num;

}

}//输出按钮列表

for(var i = 9; i >= 0 ; i --) {

strHtml += '
+ arr[i]

+ '\" onclick = \"addNum(this)\" />';

//控制换行

if(0 == (i % line)){

strHtml += '
';

}

}

return strHtml

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

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

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

效果图1



效果图2



--------------------------------------------------------------------------------------
- 版权声明：
- 如在本页面内无特别说明，本文内容均为[李大仁博客]原创，本文版权归[李大仁博客]所有。
- 欢迎转载，转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。
- 文章标题：使用JS实现的可变动态密码输入键盘控件源代码
- 独立博客：李大仁博客
- 永久链接：http://www.lidaren.com/archives/699
--------------------------------------------------------------------------------------
以上内容由博客自动发布工具自动发布，最终显示内容和效果会与原文内容有所偏差，敬请谅解。