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制作支付网页数字键盘相关推荐

html5+css3界面设计，仿微信支付设计数字键盘
html5+css3界面设计,仿微信支付设计数字键盘可以增加数字,删除数字,可以提交效果图如下: 部分代码: <!DOCTYPE html> <html> <head ...
使用JavaScript制作动态网页-1
使用JavaScript制作动态网页-1 JavaScript是什么 JavaScript是一种描述语言,基于对象和事件驱动的脚本语言. 1. JavaScript的特点脚本语言(一种轻量级的编程 ...
使用Arduino制作一款数字键盘安全门锁
通常,我们需要在家里或办公室里给某个房间上锁,以便没有人在没有我们允许的情况下不能进入房间,并确保防止盗窃或丢失我们重要的配件和资产.如今,存在许多类型的安全系统,为了进行身份验证,它们依靠指纹.视网 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘（带声音）的动画效果~~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
基于HTML+CSS+JavaScript制作学生网页——海贼王网站 4页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
jQuery/javascript实现简单网页计算器
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</t ...
基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页带轮播带js校验
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
基于HTML+CSS+JavaScript制作学生网页——外卖服务平台10页带js 带购物车
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 ...
如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接）
先来看游戏的最终效果: 3D网页版贪吃蛇游戏下面来具体讲一下如何实现. 该游戏使用Hightopo的SDK制作,总共100多行代码,没有WebGL基础的同学们也可很快掌握. 场景初始化首先,我们对 ...

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

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

运行截图：

实现代码

html:

css

Jquery+javascript制作支付网页数字键盘相关推荐

最新文章

热门文章