21164633.png
上代码
<!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>
网友评论