关于javascript:模仿支付宝输入支付密码的UI带JavaScript-密码输入校验功能

新开发一个性能，用到了一个模仿支付宝手机端输出明码的的 UI 界面，整体性能还不错。上面看截图。附件里也提供了整套的源码下载。

HTML 代码：

    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title> 挪动端明码输入框 </title>
    <script src="passwordBox.min.js"></script>
    <script>

        window.onload=function(){
            /**
             * init 传入参数顺次是：正确明码 (传空时不比照输出是否正确), 明码键盘背景，题目，副标题
             * */
            PwdBox.init('123456','http://puep.qpic.cn/coral/Q3auHgzwzM4fgQ41VTF2rNtI54KEzIMl2UNCHkMbzhTJBqpdTlpT1g/0','请输出领取明码','平安领取环境，请放心使用！');
            /**
             *res 格局：{status:'true 或 false',password:'用户输出的明码'}
             *
             */
            PwdBox.show(function(res){if(res.status){
                    // 重置输出
                    alert('明码正确');
                    // 敞开并重置明码输出
                    PwdBox.reset();}else{alert(JSON.stringify(arguments));
                }
            });
        };
    </script>

JavaScript 代码

就是下面 HTML 代码中的 passwordBox.min.js 文件源码。

var pwdBox = PwdBox = {template: '.flexable{display: -webkit-box;} .flexable>div{-webkit-box-flex: 1;} .flexable.password>div{opacity: 0};.flexable.password>div.active{opacity: 1 !important;}.password{margin: 12px 25px;}.password>div{height:46px;line-height:46px;text-align:center}.password>div:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.password>div:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.input-box .flexable>div{height:53px}.input-box .flexable>div:active{background:rgba(0,200,200,.5)}.list-block .item-title{font-weight:normal!important;font-size:14px}ul li{position:relative}.close{position:absolute;top:4px;left:4px;font-size:20px;width:22px;text-align:center} h1.title{height:50px;font-size:18px;line-height:50px;text-align:center;margin: 0;} .notice{height:30px;line-height:30px;font-size:12px;text-align:center;margin-bottom:15px;color: #00a9dd;}' + ''+'' + '×' + '领取明码' + ''+'●'+'●'+'●'+'●'+'●'+'●'+'' + ''+' 请输出领取明码！'+'' + ''+'' + ''+'' + ''+'' + ''+'' + ''+'' + ''+'' + ''+'' + '',
    passwordOrg: '',
    password: '',
    inited: false,
    callback: function(res) {if (res) {alert('明码正确');
            document.querySelector('.password-box').style.display = 'none'
        } else {alert('明码谬误')
        }
    },
    init: function(password, keyboard, title, notice) {if (pwdBox.inited) {return}
        console.log(document.getElementsByTagName('body'));
        document.getElementsByTagName('body')[0].innerHTML += pwdBox.template;
        if (keyboard) {document.querySelector('.password-box .inner-box').style.backgroundImage = keyboard
        }
        title && (document.querySelector('h1.title').innerText = title);
        notice && (document.querySelector('.password-box .notice').innerText = notice);
        password && (pwdBox.passwordOrg = password);
        document.querySelector('.close').addEventListener('click',
        function() {document.querySelector('.password-box').style.display = 'none';
            pwdBox.reset()});
        var inputs = document.querySelectorAll('.input-key');
        for (var i = 0; i < inputs.length; i++) {inputs[i].addEventListener('touchstart',
            function(e) {onTouch(this.getAttribute('data-label'))
            },
            true)
        }
        var onTouch = function(label) {if (label == 'del') {pwdBox.password = pwdBox.password.substr(0, pwdBox.password.length - 1);
                pwdBox.onChange()} else {
                pwdBox.password += label;
                pwdBox.onChange();
                if (pwdBox.password.length == 6) {if (pwdBox.passwordOrg) {if (pwdBox.password == pwdBox.passwordOrg) {
                            pwdBox.callback({
                                status: true,
                                password: pwdBox.password
                            })
                        } else {
                            pwdBox.callback({
                                status: false,
                                password: pwdBox.password
                            })
                        }
                    } else {
                        pwdBox.callback({
                            status: true,
                            password: pwdBox.password
                        })
                    }
                }
            }
        };
        pwdBox.inited = true
    },
    onChange: function() {var texts = document.querySelectorAll('.password>div');
        for (var i = 0; i < texts.length; i++) {texts[i].style.opacity = 0
        }
        for (i = 0; i < pwdBox.password.length; i++) {texts[i].style.opacity = 1
        }
    },
    reset: function() {
        pwdBox.password = '';
        pwdBox.onChange();
        document.querySelector('.password-box').style.display = 'none'
    },
    show: function(callback) {if (callback) {pwdBox.callback = callback}
        document.querySelector('.password-box').style.display = 'block'
    }
};

应用这个，次要是解决二维码明码的设置，能够来体验下性能：https://nima.vip/qr/image2qr…. 曾经上线了。