新开发一个性能，用到了一个模仿支付宝手机端输出明码的的 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.... 曾经上线了。