版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/Fabulous1111/article/details/78598425
最近做了个第三方支付页,H5+JS+相对单位rem实现(输入金额+模拟数字键盘+自适应布局+大写金额)。
源码github地址:https://github.com/XieTongXue/how-to/tree/master/pay-h5
限于篇幅,以下只给出部分关键代码(需要完整源码请到以上git地址下载):
①键盘点击处理:
<script type="text/javascript">
$(function(){
$(".payinfo").slideDown();
var $paymoney = $("#paymoney");
// 大写金额
var upperCaseMoney = $('.upper-case span');
$("#paymoney").focus(function(){
$(".payinfo").slideDown();
document.activeElement.blur();
});
$(".paynum").each(function(){
$(this).click(function(){
if(($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){
return;
}
if($.trim($paymoney.text()) == "0"){
return;
}
if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) {
return;
}
$('.pay').removeClass('pay-disabled').find('a').attr('href','pay-result.html');
$paymoney.text($paymoney.text() + $(this).text());
upperCaseMoney.text(digitUppercase($paymoney.text()));
});
});
$("#pay-return").click(function(){
$paymoney.text(($paymoney.text()).substring(0, ($paymoney.text()).length - 1));
upperCaseMoney.text(digitUppercase($paymoney.text()));
if (!$paymoney.text()) {
upperCaseMoney.text('');
$('.pay').addClass('pay-disabled').find('a').attr('href', 'javascript:return false;');
}
});
$("#pay-zero").click(function(){
if(($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){
return;
}
if($.trim($paymoney.text()) == "0"){
return;
}
if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) {
return;
}
$paymoney.text($paymoney.text() + $(this).text());
});
$("#pay-float").click(function(){
if($.trim($paymoney.text()) == ""){
return;
}
if(($paymoney.text()).indexOf(".") != -1){
return;
}
if(($paymoney.text()).indexOf(".") != -1){
return;
}
$paymoney.text($paymoney.text() + $(this).text());
});
if (!$paymoney.text()) {
$('.pay').addClass('pay-disabled');
}
});
</script>
②:金额转大写处理:
<script>
var digitUppercase = function(n) {
var fraction = ['角', '分'];
var digit = [
'零', '壹', '贰', '叁', '肆',
'伍', '陆', '柒', '捌', '玖'
];
var unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟']
];
var head = n < 0 ? '欠' : '';
n = Math.abs(n);
var s = '';
for (var i = 0; i < fraction.length; i++) {
s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
}
s = s || '整';
n = Math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++) {
var p = '';
for (var j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
}
return head + s.replace(/(零.)*零元/, '元')
.replace(/(零.)+/g, '零')
.replace(/^整$/, '零元整');
};
</script>
③:自适应布局(css也要相应设置,具体可参考本人另外一篇博客:JavaScript结合相对单位rem实现自适应布局)
<script>
(function () {
var designW = 750; //设计稿宽
var font_rate = 100;
//适配
document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
//监测窗口大小变化
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
}, false);
})();
</script>
兼容各种个手机屏幕,运行结果: