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>

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