js,css模拟支付宝微信支付密码样式

模拟支付宝微信,原生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;">&nbsp;</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>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。