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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery拖动改变div大小
Jul 04 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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程序
2012/02/04 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
phpfpm的作用和用法
2019/10/10 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python中函数参数调用方式分析
2018/08/09 Python
python实现飞机大战微信小游戏
2020/03/21 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
档案室主任岗位职责
2014/02/12 职场文书
工程负责人任命书
2014/06/06 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
围城读书笔记
2015/06/26 职场文书