最近做了個(gè)第三方支付頁，H5+JS+相對單位rem實(shí)現(xiàn)（輸入金額+模擬數(shù)字鍵盤+自適應(yīng)布局+大寫金額）。

源碼github地址：https://github.com/XieTongXue/how-to/tree/master/pay-h5

限于篇幅，以下只給出部分關(guān)鍵代碼（需要完整源碼請到以上git地址下載）：

①鍵盤點(diǎn)擊處理：

?

<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>

②：金額轉(zhuǎn)大寫處理：

?

?

<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>

③：自適應(yīng)布局（css也要相應(yīng)設(shè)置，具體可參考本人另外一篇博客：JavaScript結(jié)合相對單位rem實(shí)現(xiàn)自適應(yīng)布局）

<script>(function () {var designW = 750; //設(shè)計(jì)稿寬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";//監(jiān)測窗口大小變化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>

兼容各種個(gè)手機(jī)屏幕，運(yùn)行結(jié)果：

?

總結(jié)

以上是生活随笔為你收集整理的H5+JS+相对单位rem实现第三方支付页（输入金额+模拟数字键盘+自适应布局+大写金额）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。