21164633.png
上代码
支付密码
a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
margin: 0;
border: 0;
padding: 0;
font-style: normal;
color: #323232;
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox /
-webkit-box-sizing:border-box; / Safari */
}
ol, ul {
list-style: none;
}
.content{
margin: 60px 0 20px;
text-align: center;
}
.password{
height: 40px;
line-height: 40px;
width: 240px; margin: 0 auto;
background-color: #fff;
}
.password span{
float: left;
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
text-align: center;
}
.password span{
border-right: none;
}
.password span:last-child{
border-right: 1px solid #ccc;
}
.keyboard{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
}
.keyboard>li{
float: left;
line-height: 50px;
width: 33.3%;
text-align: center;
background-color: #fff;
}
.bottom_border{
border-bottom: 1px solid #ccc;
}
.top_border{
border-top: 1px solid #ccc;
}
.right_border{
border-right: 1px solid #ccc;
}
请设置支付密码，用于支付验证
1234567890删除
var keyboard = document.querySelector('.keyboard').querySelectorAll('li');
for(var i = 0 ; i < keyboard.length; i++){
keyboard[i].addEventListener('click',function(){
set_num(this.innerHTML)
},false);
}
function set_num(num){
var spans = document.querySelector('.password').querySelectorAll('span');
if(/[0-9]/.test(num)){
var index = 0;
for(var i = 0; i < spans.length; i++){
var val = spans[i].innerHTML;
index = i;
if(!val){
spans[i].innerHTML = num;
spans[i].setAttribute('data-num',num);
setTimeout(function(){
spans[i].innerHTML = '*';
},200);
break;
}
}
if(index == 5){
var password = '';
for(var j = 0; j < spans.length; j++){
var val = spans[j].getAttribute('data-num');
password += val;
}
alert(password)
setTimeout(function(){
for(var k = 0; k < spans.length; k++){
spans[k].innerHTML = '';
spans[k].setAttribute('data-num','');
}
},300);
}
}else if(num == '删除'){
var index = 0;
for(var i = 0; i < spans.length; i++){
var val = spans[i].innerHTML;
if(val){
index = i;
}
}
spans[index].innerHTML = '';
spans[index].setAttribute('data-num','');
}
}
