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