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

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

2019-01-08

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了jQuery仿移动端支付宝键盘的实现代码，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

HTML部分

输入支付密码

CSS部分

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部分

//响应键盘事件

$('.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:'输入正确！',time:2//2秒后自动关闭

});

}

num++;

returnfalse;

}

num++;

}

} else {

if (num >0) {

num--;

$(inputItem[num]).val('');

}

}

})

总结

以上所述是小编给大家介绍的jQuery仿移动端支付宝键盘的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！