站长资源
中国站长网站

H5仿微信支付数字键盘

效果:

H5仿微信支付数字键盘

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link rel="stylesheet" href="https://act.weixin.qq.com/static/cdn/css/wepayui/0.1.1/wepayui.min.css">
<link rel="stylesheet" href="./static/css/pay.css">
<link rel="stylesheet" href="./static/css/keyboard.css">
<title>输入金额付款</title>
</head>
<body ontouchstart class="weui-wepay-pay-wrap">
<div class="weui-wepay-pay">
    <div class="weui-wepay-pay__bd">
        <div class="weui-wepay-pay__inner">
            <h1 class="weui-wepay-pay__title">付款金额(元)</h1>
            <div class="weui-wepay-pay__inputs"> <strong class="weui-wepay-pay__strong">¥</strong>
                <input id="paymoney" type="text" class="weui-wepay-pay__input" placeholder="请输入金额"></div>
            <div class="weui-wepay-pay__intro">向商家询问支付金额</div>
        </div>
    </div>
    <div class="weui-wepay-pay__ft">
        <p class="weui-wepay-pay__info">支付金额给商户</p>
        <div class="weui-wepay-pay__btn">
        	 <img  class="weui-btn" src="https://act.weixin.qq.com/static/cdn/img/wepayui/0.1.1/wepay_logo_default_gray.svg" alt="" height="16">
        </div>
    </div>
</div>
<div></div>
<div class="payinfo">
	<table cellspacing="0" cellpadding="0">
		<tr>
			<td class="paynum">1</td>
			<td class="paynum">2</td>
			<td class="paynum">3</td>
			<td id="pay-return"><div class="keybord-return"></div></td>
		</tr>
		<tr>
			<td class="paynum">4</td>
			<td class="paynum">5</td>
			<td class="paynum">6</td>
			<td rowspan="3" class="pay">支付</td>
		</tr>
		<tr>
			<td class="paynum">7</td>
			<td class="paynum">8</td>
			<td class="paynum">9</td>
		</tr>
		<tr>
			<td id="pay-stop"><div class="keybord-stop"></div></td>
			<td id="pay-zero">0</td>
			<td id="pay-float">.</td>
		</tr>
	</table>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./static/layer/layer.js"></script>
<script type="text/javascript">
	$(function(){
		$(".payinfo").slideDown();
		var $paymoney = $("#paymoney");
		
		$("#pay-stop").click(function(){
			$(".payinfo").slideUp("fast");
		});
		
		$("#paymoney").focus(function(){
			$(".payinfo").slideDown();
       		document.activeElement.blur();
		});
		
		$(".paynum").each(function(){
			$(this).click(function(){
				if(($paymoney.val()).indexOf(".") != -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length == 2){
					return;
				}
				if($.trim($paymoney.val()) == "0"){
					return;
				}
				$paymoney.val($paymoney.val() + $(this).text());
			});
		});
		
		$("#pay-return").click(function(){
			$paymoney.val(($paymoney.val()).substring(0, ($paymoney.val()).length - 1));
		});
		
		$("#pay-zero").click(function(){
			if(($paymoney.val()).indexOf(".") != -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length == 2){
				return;
			}
			if($.trim($paymoney.val()) == "0"){
				return;
			}
			$paymoney.val($paymoney.val() + $(this).text());
		});
		
		$("#pay-float").click(function(){
			if($.trim($paymoney.val()) == ""){
				return;
			}
		
			if(($paymoney.val()).indexOf(".") != -1){
				return;
			}
			
			if(($paymoney.val()).indexOf(".") != -1){
				return;
			}
			
			$paymoney.val($paymoney.val() + $(this).text());
		});
		
		$(".pay").click(function(){
			layer.alert("支付的金额为:"+$paymoney.val());
		});
	});
</script>
</html>

完整源码请自行下载


免费下载  在线演示  
×

站长资源极速下载通道: H5仿微信支付数字键盘

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » H5仿微信支付数字键盘

评论 抢沙发

评论前必须登录!