Jquery+javascript实现支付网页数字键盘

时间：2021-05-26

Jquery+javascript动态生成支付网页数字键盘

制作网页支付界面的时候，数字键盘适配不同的屏幕宽高比是一个很麻烦的事，所以我制作了一个根据屏幕宽高动态生成的数字键盘

运行截图：

实现代码

html:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta content="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="{{你的css文件路径}}" > <title>动态数字键盘</title></head><body> <div class="pay-top"> <img class="lklogo" src="img/lianke.png"> <div class="pay-shop-info"> <span class="shop-name">付款给：{{付款对象名}}</span> </div> <div class="paymoneylogo"> <span>￥</span> </div> <label class="inputlabel" id="paymoney" type="text"></label> </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"> <a href="javascript:return false;" > <div class="a-pay"> <p>确认</p> <p>支付</p> </div> </a> </td> </tr> <tr> <td class="paynum">7</td> <td class="paynum">8</td> <td class="paynum">9</td> </tr> <tr> <td id="pay-zero" colspan="2" class="payzero">0</td> <td id="pay-float">.</td> </tr> </table> </div></body><script src="./js/jquery.js"></script><script type="text/javascript"> $(function () { $(".payinfo").slideDown(); var $paymoney = $("#paymoney"); $("#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; } $paymoney.text($paymoney.text() + $(this).text()); }); }); $("#pay-return").click(function () { $paymoney.text(($paymoney.text()).substring(0, ($paymoney.text()).length - 1)); if (!$paymoney.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()); }); $('.pay').click(function () { alert("支付金额为"+$paymoney.text()) }); })</script> <!--自适应布局--><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></html>

css

@CHARSET "UTF-8";html,body{ background-color:#fff;}.pay-top{ position: absolute; width: 100%; height:60%; background: #fff;}.pay-shop-info { position: absolute; width: 90%; left:5%; text-align: right; top:3.4rem; font-size:0.3rem ; }.paymoneylogo { position: absolute; width: 90%; left:5%; top:4rem; height: 1.3rem; border-bottom: 0.02rem solid #bfbfbf; -webkit-border-radius: 0.02rem; -moz-border-radius: 0.02rem; border-radius: 0.02rem; background: #fff;}.inputlabel{ position: absolute; width: 90%; left:5%; top:4rem; height: 1.3rem; text-align: right;}.lklogo{ position: absolute; height: 1.2rem; width: 50%; left:25%; top:0.8rem;}.payinfo{ display:none;}.payinfo .paynum { font-size: 0.6rem; color: #424857;}.payinfo .payzero { font-size: 0.6rem; color: #424857;}table{ width:100%; height:50%; position:absolute; bottom:0; background-color:white; background-top:none;}table tr td{ text-align:center; width: 1.88rem; height: 1.26rem; font-family: "Microsoft YaHei"; font-weight: normal; border-right:1px solid #D9D9D9; border-top:1px solid #D9D9D9;}table tr td:active{ background-color:#ECECEC;}.keybord-return{ width: 1.88rem; height: 1.26rem; background:url(../img/keybord_return.png) no-repeat; background-size: 50% 50%; background-position: center;}.pay{ color:#fff; font-size:0.4rem; background-color:#0259a1; }.pay:active{ background-color: #004198;}.pay a{ display: block; position: relative; width: 100%; height: 100%; color: #fff; text-decoration: none; }.a-pay { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}.pay-disabled { background-color: #0259a1;}

附带上退格符，将其放项目的img文件中，否则数字键盘退格符无法显示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章