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


Posted in jQuery onDecember 21, 2020

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实现支付网页数字键盘

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
jQuery实现简单弹幕制作
Dec 10 #jQuery
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
jquery实现拖拽添加元素功能
Dec 01 #jQuery
jQuery实现可以扩展的日历
Dec 01 #jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
You might like
php下连接mssql2005的代码
2011/01/17 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python urllib3软件包的使用说明
2020/11/18 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
制定岗位职责的原则
2013/11/08 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
室内拓展活动方案
2014/02/13 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
大学生就业自荐书
2014/06/16 职场文书
孔庙导游词
2015/02/04 职场文书
求职推荐信范文
2015/03/27 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书