當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Jquery+javascript制作支付网页数字键盘

發布時間：2024/1/1 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Jquery+javascript制作支付网页数字键盘小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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文件中，否則數字鍵盤退格符無法顯示：

總結

以上是生活随笔為你收集整理的Jquery+javascript制作支付网页数字键盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： GBase 8s 安装-定制安装
下一篇： JS判断是否为数字或为空