js 初级 软键盘

js 初级 软键盘




软键盘

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content{
position: relative;
}
ul{
position: absolute;
width: 180px;
height: 60px;
top: 5px;
left: 247px;
display: none;
}
li{
width: 30px;
height: 30px;
border: 1px solid #000;
cursor: pointer;
float: left;
list-style: none;
text-align: center;
}

用户名：

密码名：

• <-


• OK

var inp = document.getElementById(“inp”);
var ul = document.getElementById(“ul”);
var li_s = document.getElementById(“li_shan”);
var li_ok = document.getElementById(“li_ok”);
inp.onfocus = function(){
var nums = [];
ul.style.display = “block”;
for(var i = 0;i<=9;i++){
document.getElementById(“li” + i).innerHTML = “”; //清空
var num = Math.floor(Math.random()*10);
// document.getElementById(“li” + i).innerHTML = num;
// 去重
if(ischeck(num,nums)){
document.getElementById(“li” + i).innerHTML = num;
nums.push(num);
// nums[i] = num;
}else{
i –;
}
}
console.log(nums)
}
function ischeck(num,nums){
// 5 [0,9, ,5,1,3]
var flag = true; //给定初始条件，假设一直没有重复
for(var i = 0;i < nums.length;i++){
if(num == nums[i]){ //肯定有重复
flag = false;
break;
}
}
return flag;
}
// inp.onblur = function(){
// ul.style.display = “none”;
// }

        li_ok.onclick = function(){
            ul.style.display = "none";
        }

        function fuzhi(id){
            inp.value += document.getElementById(id).innerHTML
        }
        function del(){
            inp.value = inp.value.slice(0,-1);
        }

// var num = [];
// num[4] = 30;
// console.log(num)