jQuery仿移动端支付宝键盘的实现代码


Posted in jQuery onAugust 15, 2018

最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种。由于项目只是单纯的手机网站,而并非app,所以这个功能得由前端来实现。话不多说,先上图看看效果。

jQuery仿移动端支付宝键盘的实现代码

尼玛,这不就是支付宝app那个支付键盘吗? 没错,咱们UI就是参照支付宝做的这个键盘。你可能会问,为什么不直接调用支付宝提供的支付接口呢。额,因为项目需要,这里就不多解释了。

我们先看一下实现后的效果图

jQuery仿移动端支付宝键盘的实现代码jQuery仿移动端支付宝键盘的实现代码jQuery仿移动端支付宝键盘的实现代码

HTML部分

<!-- 支付键盘 -->
  <divclass="pay-container">
    <divclass="pay-title">
      <spanclass="pay-title-remove">×</span>
      输入支付密码
    </div>
    <divclass="pay-body">
      <divclass="input-container">
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
      </div>
      <divclass="forgetPwd-container">
        <aclass="forgetPwd"href="">忘记密码?</a>
      </div>
      <divclass="key-container">
        <divclass="key-item">1</div>
        <divclass="key-item">2</div>
        <divclass="key-item">3</div>
        <divclass="key-item">4</div>
        <divclass="key-item">5</div>
        <divclass="key-item">6</div>
        <divclass="key-item">7</div>
        <divclass="key-item">8</div>
        <divclass="key-item">9</div>
        <divclass="key-item empty"></div>
        <divclass="key-item">0</div>
        <divclass="key-item remove"></div>
      </div>
    </div>
  </div>

CSS部分

.pay-container{ width:7.5rem; height:8rem; background-color:#fbf9fb; position:fixed;z-index:999; overflow:hidden;display:none; }
/* .pay-container-show{transform: translate3d(0, -8.9rem, 0);transition: 0.5s ease;transform: translate3d(0, 0, 0); transition: 0.5s ease;} */
.pay-title{ height:0.96rem; line-height:0.96rem; border-bottom:1pxsolid#b3afaf; text-align:center; color:#070707;
position:relative; font-size:0.36rem;}
.pay-title.pay-title-remove{ width:0.24rem; height:0.24rem; position:absolute; top:0.35rem; left:0.33rem; line-height:0.28rem;
font-size:0.45rem;}
.pay-body{ padding-top:0.56rem;position:relative; height:7rem; box-sizing:border-box;}
.pay-body.input-container{ width:6.74rem; height:0.93rem; border:1pxsolid#ebe8eb; overflow:hidden; border-radius:5px;
background-color:#fff; margin:0auto; display:flex;flex-direction:row;align-items:center; 
flex-wrap:wrap; justify-content:center;align-content:center;}
.pay-body.input-container.input-item{ width:1.1rem; height:0.92rem; display:inline-block; margin:0; border-right:1pxsolid#ebe8eb;
text-align:center; line-height:0.92rem; border-radius:0; }
.pay-body.input-container.input-item:nth-last-child(1){ border-right:0;}
.pay-body.forgetPwd-container{width:6.74rem;margin:0.22remauto0; text-align:right;}
.pay-body.forgetPwd-container.forgetPwd{ color:#52bfff; font-size:0.24rem; }
.pay-body.key-container{ width:100%; height:4.56rem; position:absolute; bottom:0; display:flex;flex-direction:row;align-items:center; 
  flex-wrap:wrap; justify-content:center;align-content:center; }
.pay-body.key-container.key-item{ width:2.47rem; height:1.12rem; line-height:1.12rem; text-align:center; border-right:2pxsolid#f3f3f3;
  border-top:2pxsolid#f3f3f3; font-size:0.66rem; color:#1e1d1f;background-color:#fff;}
.pay-body.key-container.key-item:nth-child(3),
.pay-body.key-container.key-item:nth-child(6),
.pay-body.key-container.key-item:nth-child(9),
.pay-body.key-container.key-item:nth-child(12){ border-right:0;}
.pay-body.key-container.key-item.remove,.pay-body.key-container.key-item.empty{ font-size:0.24rem;background-color:#e6e9f1;}
.pay-body.key-container.key-item.remove{ background:url('../images/pay-remove.png') centerno-repeat#e6e9f1; background-size:.52rem.32rem; }
.pay-body.key-container.selected{ background-color:#e4e8f4;}

核心JS部分

var arr = [];
    var num =0;

    //响应键盘事件
    $('.key-item').on('touchstart', function () {
      $(this).addClass('selected')
    })
    $('.key-item').on('touchend', function () {
      $(this).removeClass('selected')
    })
    $('.key-item').on('click', function () {
      var value =$(this).text();
      var inputItem =$('.layui-m-layercont .input-item');
      if (!$(this).hasClass('remove')) {
        if (num <6) {
          $(inputItem[num]).val(value);
          if (num ==5) {
            var arr = [];
            for (var i =0; i < inputItem.length; i++) {
              arr.push(inputItem[i].value)
            }
            arr =parseInt(arr.join(''));
            if (arr !==123456) {
              layer.open({
                content:'支付密码错误请重新输入!',
                skin:'msg',
                time:2//2秒后自动关闭
              });
            } else {
              layer.open({
                content:'输入正确!',
                skin:'msg',
                time:2//2秒后自动关闭
              });
            }
            num++;
            returnfalse;
          }
          num++;
        }
      } else {
        if (num >0) {
          num--;
          $(inputItem[num]).val('');
        }
      }
    })

总结

以上所述是小编给大家介绍的jQuery仿移动端支付宝键盘的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
jQuery中$原理实例分析
Aug 13 #jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
You might like
php动态生成函数示例
2014/03/21 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
微信小程序select下拉框实现效果
2019/05/15 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
使用python实现knn算法
2017/12/20 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
python使用smtplib模块发送邮件
2020/12/17 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
资料员的岗位职责
2013/11/20 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
初一学生期末评语
2014/04/24 职场文书
师范毕业生求职信
2014/07/11 职场文书
离婚协议书范本样本
2014/08/19 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
MongoDB支持的数据类型
2022/04/11 MongoDB