模拟支付宝微信,原生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>