位置: 编程技术 - 正文

JavaScript仿支付宝密码输入框(java模拟支付功能)

编辑:rootadmin

推荐整理分享JavaScript仿支付宝密码输入框(java模拟支付功能),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js微信支付开发教程,js 支付,js微信支付开发教程,html仿微信支付,java模拟支付,js支付功能,html仿微信支付,js支付功能,内容如对您有帮助,希望把文章链接给更多的朋友!

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧:

那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签。

并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin值,那么HTML就是如下的样子:

JavaScript仿支付宝密码输入框(java模拟支付功能)

在代码中我们需要设置最多输入的位数,不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来,我们也需要设置type="tel"。那么接下来就是CSS样式的代码了,这里我就简单的贴出一些代码,具体高仿的像不像其实就是这里了~

那么接下来就是最关键的JavaScript部分了,

首先我们对最外层的div进行监听,当发现用户选择div的时候就将input的焦点设置到active上面去,而这个active则是一个计数器,默认的时候是第一位的,也就是0,而当我们输入了正确的数字后将会增加一个active,这样input的焦点就会向后移动了,这样就完成了输入一个向后移动一位的功能了,而同时我们监听键盘上的退格键,当用户点击了退格键之后就对active减一,这样输入框的焦点也就向前移动了,当然,当input失去焦点的时候我们也同时移除绑定在上面的监听事件,这样就不会造成多次触发的问题了。

其实这样梳理下来会发现整个效果还是很简单的,只需要控制好一个焦点的移动就好了,而我觉得整个组件的重点还是在CSS样式的模仿上面~毕竟JavaScript的逻辑没有什么难的~最后祝大家元旦快乐啦~(*^__^*) ~~

以上代码给大家简单介绍了JavaScript仿支付宝密码输入框的全部叙述,希望大家喜欢。

你有必要知道的个JavaScript面试题 1、使用typeofbar==="object"判断bar是不是一个对象有神马潜在的弊端?如何避免这种弊端?使用typeof的弊端是显而易见的(这种弊端同使用instanceof):letobj={};l

javascript从作用域链谈闭包 神马是闭包关于闭包的概念,是婆说婆有理。闭包是指有权访问另外一个函数作用域中的变量的函数这概念有点绕,拆分一下。从概念上说,闭包有两

js为什么不能正确处理小数运算? varsum=0;for(vari=0;i;i++){sum+=0.1;}console.log(sum);上面的程序会输出1吗?在你有必要知道的个JavaScript面试题一文中,第8个题浅显的说了下js为什么不能正确

标签: java模拟支付功能

本文链接地址:https://www.jiuchutong.com/biancheng/385584.html 转载请保留说明!

上一篇:原生js配合cookie制作保存路径的拖拽(原生js实现promise.all)

下一篇:你有必要知道的25个JavaScript面试题(你知道必要的意思吗英文)

  • 全额纳税是什么意思
  • 纳税人对所提交信息的什么负责
  • 支付办公楼维修费
  • 后期装修改造费用计入什么科目
  • 综合所得申报怎么作废
  • 增值税报税后多久缴纳期限
  • 综保区和自贸区的联系
  • 虚增成本300万财务人员责任
  • 长期待摊费用摊销年限规定
  • 货物和运费一起开票怎么开
  • 小规模销售收入要做销项税额吗
  • 亏损企业要做业务处理吗
  • 国资委无偿划拨资产不上税吗
  • 合并会计报表调整分录
  • 固定资产清理后卡片如何处理
  • 筹建期间的费用可以扣除吗
  • 农产品收购发票图片
  • 税务系统出问题怎么办
  • 外币结算方式有哪几种
  • 社保稳岗补贴可以申请几次
  • 增值税专用发票和普通发票的区别
  • 无偿使用房屋
  • 车船税在哪个科目下
  • 六月雪的养殖方法和注意事项
  • vue获取当前页面请求头信息
  • phpstudy如何查看错误日志
  • 应付债券到期偿还
  • 投资性房地产期末公允价值大于账面价值
  • php tokenizer
  • 销售多余材料计入什么
  • 2021最好的固态
  • 金融行业如何征收营业税
  • 增值税发票超额后税率
  • 结转本月收入类账户到本年利润
  • 两借两贷属于复合会计分录吗
  • vuex存储用户信息
  • php的mysql_query
  • 【角色扮演】
  • ipcrm命令
  • 现代服务包括哪些税目
  • 一般纳税人是否享受减免政策
  • 现金销售收入是什么意思
  • 医用耗材税率是多少
  • 工会经费发放奖励个税处理
  • 电子税务局怎么查询开票记录
  • 小规模当月开普票作废流程
  • 金税四期查到了怎么办
  • 非正常损失的进项税额可以转出吗
  • 开具定额发票应如何做账?
  • sql中的聚合函数
  • 转贴现占谁的授信
  • 国家高新技术企业补贴
  • 社保金的滞纳金个人承担吗?
  • 企业取得生产或制造某项财产物资时
  • 设备维保费如何计算
  • 劳务公司的工资表怎么做账
  • 预付差旅费属于什么类型
  • ubuntu怎么安装包
  • xp系统怎么找回删除的文件
  • awk正则表达式中引入变量
  • windows 10 20h2推送
  • 简洁桌面怎么设置
  • win7系统电脑无限重启
  • win8怎么打开ie浏览器
  • win10系统无线网络连接在哪
  • excel文档权限设置
  • 摄像机跟随与摄像的区别
  • 你应该知道的几个问题
  • jquery foreach循环
  • jquery判断是否有某个class
  • jquery网页设计作业
  • jquery中if语句
  • [置顶]电影名字《收件人不详》
  • 个人土地建房
  • 12366电子税务局重庆
  • 如何申报印花税的流程
  • 存量房交易税费申报表是契证吗
  • 江西税务登记证查询官网
  • 土地增值税如何入账
  • 杭州电子税务局怎么添加办税员
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设