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

最近做了个第三方支付页，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>

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

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

罚单不断，长文揭秘第三方支付！
随着移动支付的快速发展,第三方支付已经深度融入到生活中,如果生活在一二线城市,从吃饭.购物.看电影.菜市场买菜到搭公交地铁,你能想到的消费场景,基本都可以用移动支付解决.在这些便捷的背后都有第三方支付 ...
【转】关于第三方支付，看这篇文章就够了！
本文转载自:https://blog.csdn.net/ityouknow/article/details/89089914 随着移动支付的快速发展,第三方支付已经深度融入到生活中,如果生活在一二线城 ...
第三方支付兼并出海浪潮 | 发展趋势篇
本篇文章给大家介绍第三方支付行业发展趋势. 第三方支付行业发展趋势我国第三方支付行业加快增长,从2013年起,第三方支付市场的交易规模平均以50%的年均增速增长.2017年,我国第三方支付行业总 ...
一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现...
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
Jquery+javascript制作支付网页数字键盘
Jquery+javascript动态生成支付网页数字键盘制作网页支付界面的时候,数字键盘适配不同的屏幕宽高比是一个很麻烦的事,所以我制作了一个根据屏幕宽高动态生成的数字键盘运行截图: 实现代码 ...
php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
android 调用数字键盘,微信调用支付数字键盘功能实现方法(Android)
微信调用支付数字键盘功能实现方法(Android)现在微信支付.输入密码功能,已经开始使用自定义数字键盘,这样不仅更加方便.其效果着实精致.你知道微信支付和输入密码时自定义数字键盘是如何实现的? 不知 ...
html5实现第三方支付,js实现弹窗功能(以支付方式为例)
用H5写的页面其中需要实现弹窗支付功能,功能能够如下: js弹窗.png 注意:在这里只介绍弹窗功能,不介绍如何调用第三方支付功能. 完整代码如下: 资讯 /* ------------------- ...
通联支付php接口,php对接第三方支付--通联支付（H5版）
###第三方支付--通联支付 1.文档地址:[通联H5对接文档](http://www.allinpaysupport.com/news_show.aspx?id=110) 2.对接流程:用户注册请求 ...

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

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

最新文章

热门文章