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 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python之django母板页面的使用
2018/07/03 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python中求对数方法总结
2020/03/10 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
教师推荐信范文
2013/11/24 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
党的生日活动方案
2014/08/15 职场文书
幼师个人总结范文
2015/02/28 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
死亡诗社观后感
2015/06/05 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android