手机端支付html样式,移动端支付密码虚拟键盘样式+功能实现

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;

}

请设置支付密码，用于支付验证

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
•  
• 0
• 删除

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','');

}

}