模仿支付宝输入支付密码的UI,带JavaScript 密码输入校验功能

Jul 13, 2020 12:07:26 AM 1608

我们新开发功能,用到了一个模拟支付宝手机端输入密码的的  UI  界面,整体功能还不错。下面看截图。附件里也提供了整套的源码下载。


HTML 代码




    
    
    移动端密码输入框
    
    




JavaScript 代码

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

var pwdBox = PwdBox = {
    template: '' + '',
    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.html 已经上线了。


版权所属:JavaScript加密

原文地址:https://www.jsjiami.com/article/ui-password.html

转载时必须以链接形式注明原始出处及本声明。


本文标签:
最新文章
Chrome浏览器模拟微信客户端访问网址,方法图文讲解模拟微信 46
JavaScript在线加密,最牛加密按次加密计费方式讲解。 163
丁香公开课请求 sign(签名) 分析过程讲解 355
JavaScript优雅的跳转,作弊跳转方式,JS防检测跳转。 2321
JS代码书写注意事项,JavaScript代码压缩后为什么报错? 1190
JavaScript 加密混淆之后运行 xxxx is not defined,Javascript 提示xxxx is not defined 怎么办? 1745
模仿支付宝输入支付密码的UI,带JavaScript 密码输入校验功能 1608
获取当前北京时间API 3185
JS从数组中随机获取一个值 724
Autojs怎么安全加密?Autojs在线加密工具注意事项。 9756

      商务合作:1#vfan.cn(把#换成@),或者联系QQ:84034666

      业务咨询:i#itboy.net(把#换成@),或者联系QQ:8446666

再次输入密码