模拟支付宝微信，原生JS做支付密码样式和功能。
界面图：
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付密码</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width" />
<style type="text/css"> 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; }
</style>
</head>
<body>
<div class="content">
请设置支付密码，用于支付验证
</div>
<div class="password">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul class="keyboard clearfix">
<li class="bottom_border right_border top_border">1</li>
<li class="bottom_border right_border top_border">2</li>
<li class="bottom_border top_border">3</li>
<li class="bottom_border right_border ">4</li>
<li class="bottom_border right_border">5</li>
<li class="bottom_border ">6</li>
<li class="bottom_border right_border">7</li>
<li class="bottom_border right_border">8</li>
<li class="bottom_border ">9</li>
<li style="background-color: #d5d8db;"> </li>
<li>0</li>
<li style="background-color: #d5d8db;">删除</li>
</ul>
<script type="text/javascript">
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','');
}
}
</script>
</body>
</html>
支付宝扫码打赏
微信打赏