H5+JS+相对单位rem实现第三方支付页（输入金额+模拟数字键盘+自适应布局+大写金额）

最近做了个第三方支付页，H5+JS+相对单位rem实现（输入金额+模拟数字键盘+自适应布局+大写金额）。

全部源码地址：https://github.com/XieTongXue/pay

限于篇幅，以下只给出部分关键代码（需要完整源码请到以上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>

兼容各种个手机屏幕，运行结果：