js实现模拟数字密码输入键盘

最新推荐文章于 2023-11-01 17:59:04 发布

beijixing1992

最新推荐文章于 2023-11-01 17:59:04 发布

阅读量1.7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/beijixing1992/article/details/8678893

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="./css/common.css"/>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:30px;}

#apDiv2 {
position: absolute;
left: 506px;
top: 388px;
width: 336px;
height: 50px;
z-index: 2;
}
#layerDisplay {
position: absolute;
left: 846px;
top: 388px;
width: 161px;
height: 80px;
border:1px solid #CCC;background-color:#EEE; display:none;
z-index: 1000;
}
#apDiv3 {
position: absolute;
left: 508px;
top: 452px;
width: 461px;
height: 68px;
z-index: 3;
}
#apDiv4 {
position: absolute;
left: 931px;
top: 102px;
width: 295px;
height: 34px;
color:#fff;
z-index: 4;
}

#apDiv5 {
position:absolute;
left:313px;
top:298px;
width:184px;
height:46px;
z-index:17;
}
#apDiv6 {
position:absolute;
left:313px;
top:389px;
width:184px;
height:55px;
z-index:18;
}
input{border:1px solid #CCC; margin:1px;}
.text{height:20px;width:200px; font-size:28px;}
.number{height:24px; width:28px; color:#00F;}
.command{height:30px; width:75px; color:#F00;font-size: 24px;}

</style>

<script type="text/javascript">

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

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

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

if(le>=6){
document.getElementById("btnHide").focus();
}else{
document.getElementById("btn1").focus();
}
}

//确定
function hide(){
var id = OBJID;
$(id).style.display = "none";
document.getElementById("chaxun").focus();
}
//后退
function reset(){
var txtDisplay=document.getElementById("txtDisplay").value;
// alert(txtDisplay);
//alert(txtDisplay.length);
var l=txtDisplay.length;
var tt = txtDisplay.substring(0,l-1) ;
document.getElementById("txtDisplay").value = tt;
}

//获取控件
function getControl(){
var strHtml = "";
//初始化键盘
strHtml += initNum(5);
//OK按钮
strHtml += "<input type=\"button\" id=\"btnReload\" name=\"btnReload\" value=\"后退\" class=\"command\" οnclick=\"reset()\"/>";
//隐藏按钮
strHtml += "<input type=\"button\" id=\"btnHide\" name=\"btnHide\" value=\"确定\" class=\"command\" οnclick=\"hide()\"/>";
//设置按钮并显示
return strHtml;
}

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

}

//初始化数字键盘
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)\" id=\"btn' + i +'\"/>';
//控制换行
if(0 == (i % line)){
strHtml += '<br />';
}
}
return strHtml;
}
</script>
</head>

<body >

<div id="apDiv2"><div class="txt001"><label for="textfield"></label>
<input type="password" id="txtDisplay" name="txtDisplay" οnfοcus="load(OBJID)" value="" class="textfield" maxlength="6"/></div></div>
<div id="layerDisplay"></div>

<div id="apDiv6">请输入密码：</div>

</body>
</html>

beijixing1992

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现模拟数字密码输入键盘

无标题文档body{ margin:0px; padding:0px; font-size:30px;}#apDiv2 {position: absolute;left: 506px;top: 388px;width: 336px;height: 50px;z-index: 2;}#layerDisplay {position:
复制链接

扫一扫