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

2024-08-17 07:20: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文件中，否则数字键盘退格符无法显示：

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

原生js制作简单的数字键盘

一.起因最近支付的同事说,数字键盘有些问题:在移动设备上有时候比较难出现点(.) 和数字在一起的格局:因此,考虑到这种情况,就建议手写个模拟键盘了.花了一晚上的时间,写了个简单的键盘,基本能用.考虑到有的开发者没有使用juqery,就使用原生的js了. Github地址:https://github.com/vczero/keyboard 二.截图如下三.体验地址(需要点击input才能弹出数字键盘的哦) URL: http://vczero.github.io/num_key/index.
javascript 响应键盘特定按键(只响应数字键)

响应键盘特定按键(只响应数字键) =48&&event.keyCode=96&&event.keyCode [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
vue引入js数字小键盘的实现代码

效果如图: 代码如下: keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v-for="key in keys"> <i v-if=&q
JavaScript使用键盘输入控制实现数字验证功能

现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单,代码如下: va
JavaScript实现的可变动态数字键盘控件方式实例代码

整理文档,搜刮出一个JavaScript实现的可变动态数字键盘控件方式实例代码,稍微整理精简一下做下分享. @sunRainAmazing JavaScript编写和实现的可变动态键盘密码输入控件,可以动态的生产数字键盘并显示,并且可以实现每次点击后密码键盘重新加载,可以手动刷新功能. 第一种方式,点击查看: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
js禁止小键盘输入数字功能代码

复制代码代码如下: function isNum()//判断小键盘输入数字 { var str=(window.event.keyCode); if(str>105 || str<96 ) { if (str!=8 ) { window.event.returnValue=false; return; } } } function isNumUp()//判断主键盘输入数字 { var str=(window.event.keyCode); if(str>57 || str<48
Jquery+javascript实现支付网页数字键盘

Jquery+javascript动态生成支付网页数字键盘制作网页支付界面的时候,数字键盘适配不同的屏幕宽高比是一个很麻烦的事,所以我制作了一个根据屏幕宽高动态生成的数字键盘运行截图: 实现代码 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="initial-scale=1.0,maximum-scale=1.0,use
Kotlin自定义实现支付密码数字键盘的方法实例

你能学到什么 kotlin的使用, 扩展特性的写法等自定义ViewGroup的一些基础知识 xml属性的编写和读取因为每个按键都考虑到需要支持背景设置等其他个性设置和Touch手势的处理, 所以我决定采用每个按键对应一个View的思路实现. 否则可以使用Canvas.drawText实现这样可以提高扩展性和可自定义性 1.根据效果图先定义按键 //首先定义需要的那些按键 //顺序打乱,展示的时候也就是乱序的,可以更安全. //特殊按键-> "":表示空白占位按键; &q
Android 高仿微信支付数字键盘功能

现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
jQuery javascript获得网页的高度与宽度的实现代码

网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高: document.b
JavaScript利用正则表达式来禁止键盘输入数字

今日在看JavaScript的时候,发现键盘响应时间onkeydown和一些其他的相关事件都停用了keyCode这个属性,而keyCode这个属性返回的是键盘按键的ASCII码值,停用后有个code属性替代,但也不完全替代,因为code属性返回的是键值本身的值,所以写法也不一样,下面用正则表达式来禁止输入框输入数字,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&
jQuery实现只允许输入数字和小数点的方法

本文实例讲述了jQuery实现只允许输入数字和小数点的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
jQuery实现简单的网页换肤效果示例

本文实例讲述了jQuery实现简单的网页换肤效果.分享给大家供大家参考,具体如下: 这里有4个文件:skin.html.blue.css.green.html.red.html,都放在同一目录下. 1.skin.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
jQuery+CSS实现的网页二级下滑菜单效果

本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果和菜单下滑效果和渐变效果已经做出来了,在IE下表现不错,在火狐下发现菜单有闪烁现象,有空会继续修正,感谢大家捧场哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具体

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

相关推荐

随机推荐