支付宝支付框js代码
首先要说明原理:
1.input:text框让他层级最高,这边要设置透明度,这样保证遮盖的盒子操作的box-shadow能看的到,让文字的color设为背景色一致,这里设置为白色,在这样就看不到默认的字了
2.然后是给一个盒子来存放输入的框,就是6个虚拟的密码框,来显示你输入的个数
3.每个密码框里面另外存放一个小盒子,背景色为黑色,border-radus设为50%,令其为圆形,模拟输入的密码
这边的意思大概这样,其他需要通过js来操作效果
全部代码奉上(本文参考http://www.qdfuns.com/notes/13457/2212f3d3af79179f3275dc5b7c0282e3.html)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <style>*{margin: 0;padding:0;}.paycontainer{margin: 20px 100px;background-color: pink;position: relative;}.paypasswordcontainer{width: 300px;height: 46px;font-size: 12px;position: absolute;color: #ffffff;z-index:9;opacity:0.2;-webkit-user-select: initial; /*取消禁用选择页面元素*/background-color: #ffffff;outline:none;}.sixpassword{width: 300px;height: 22px;position: absolute;top:1px;left:1px;padding:13px 0;cursor: text;background: #fff;border-radius: 5px;}.sixpassword i{display: inline-block;width: 49px;height: 22px;border-left: 1px solid #cccccc;float: left;}.sixpassword i:first-child{border-left:0;}.sixpassword i.active{background: url("https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif") no-repeat 60% center;}.sixpassword b{width: 7px;height: 7px;background-color: #000;display: block;margin: 7px auto;display: none;border-radius: 50%;}.guanbiao{width: 48px;height: 46px;display: block;position: absolute;display: block;left: 0px;top: 0px;border: 1px solid #00ffff;border-radius: 5px;box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) ;} </style> <body><div class="paycontainer"><input type="password" minlength="6" maxlength="6" class="paypasswordcontainer"oncontextmenu="return false" onpaste="return false" oncopy="return false"oncut="return false" autocomplete="off"><div class="sixpassword"><i class="active"><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><span class="guanbiao"></span></div></div><p></p> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script>$(function(){$(".paypasswordcontainer").keyup(function(){$input_val=$(this).val();$input=$input_val.length;for (var x = 0; x <= 6; x++) {$("p").html($input);if ($input == 0) {$(".sixpassword").find("i").eq(0).addClass("active").siblings("i").removeClass("active");$(".sixpassword").find("b").css({"display": "none"});$(".guangbiao").css({"left": 0});}else if ($input == 6) {$(".sixpassword").find("b").css({"display": "block"});$(".sixpassword").find("i").eq(5).addClass("active").siblings("i").removeClass("active");$(".guangbiao").css({"left": 5 * 50});}else{$(".sixpassword").find("i").eq($input).addClass("active").siblings("i").removeClass("active");$(".sixpassword").find("i").eq($input).prevAll("i").find("b").css({"display":"block"});$(".sixpassword").find("i").eq($input).nextAll("i").find("b").css({"display":"none"});$(".guanbiao").css("left",$input*50);}}})}) </script> </html>
οncοntextmenu="return false" οnpaste="return false" οncοpy="return false" oncut="return false" //此处是禁止密码复制粘贴的
autocomplete="off"//让浏览器不自动记录之前输入的值,很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到 在写的时候遇到一个问题怎么也搞不定,朋友一句话就把我点醒了"行内块默认有间距",这个是格式化不了的,只能通过浮动解决
转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/6307638.html
支付宝支付框js代码相关推荐
- android支付宝签名生成工具,Android支付宝支付的示例代码
上一篇,我们已经详细讲解了Android微信支付,今天接着为大家带来支付宝支付,支付宝支付相对微信支付要简单一些,吐槽一下,而且支付宝文档确实比微信的文档好了不少,下面开始讲解支付流程. 1.首先给出 ...
- 哈哈!没想到吧!Java也可以 实现微信和支付宝支付功能(附代码)
一.前期准备 1.申请好微信商户号appid,拿到商户id和商户秘钥,退款的话需要商户证书 2.申请好支付宝商户号appid,商户公钥和秘钥(需要用支付宝工具自己生成),支付宝退款不需要证书 二.数据 ...
- 电脑支付宝支付 vue.js+java
1.前台请求后台获得相应的地址参数,跳转URL 前台跳转支付页面 (1)前台 window.document.location = "${ctxPath}/api/alipay.html?_ ...
- iOS支付宝支付集成
概述 iOS支付宝支付集成 详细 代码下载:http://www.demodashi.com/demo/10729.html 支付宝和微信都是业界的老大哥,相信大家都有所觉得文档.SDK都是各种坑吧( ...
- 支付系统实战 | 支付宝支付
文章目录 1.支付 2.支付宝支付 支付分类 快捷支付 手机支付 二维码支付 声波支付 NFC支付 iptv支付 指纹支付 刷脸支付 3.沙箱(沙盒) 4.支付流程 5.支付宝支付准备工作 6.代码开 ...
- java 支付宝h5网页支付接口,移动端h5网页调用支付宝支付接口
领导第一次让我做h5支付宝支付的时候,去了支付宝开放平台,一顿上上下下左左右右,看完了长呼一口气.这个支付好像没我啥事儿啊!小伙伴儿们自行查看:https://opendocs.alipay.com/ ...
- easyui js解析字符串_EasyUI Dialog弹出框+JS执行字符串
虽然写得不是很全面,但这是项目中经常用到的 Dialog弹出框 Div标签 Dialog内容 iconCls:图标 closed:默认关闭 modal:模态框 JS代码 function openDi ...
- 移动端h5网页调用支付宝支付接口
来源 | https://www.dsiab.com/post/4181 领导第一次让我做h5支付宝支付的时候,去了支付宝开放平台,一顿上上下下左左右右,看完了长呼一口气. 这个支付好像没我啥事儿啊! ...
- 支付宝支付接口的调用(支付宝支付的实现)
首先,下面是调用支付宝接口的官网: 支付宝开放平台https://open.alipay.com/platform/home.htmhttps://open.alipay.com/platform/h ...
最新文章
- 政、企、学三方视角下的智慧城市发展 | 2020中关村论坛“人工智能与城市可持续发展论坛”成功举办...
- anki怎么设置学习计划_新媒体企业品牌营销策划公众号运营规划线上推广内容管理sop工作流程计划方案表格模板新手小白零基础怎么学习写作软文涨粉技巧攻略下载...
- Linux文本模式中文乱码
- 国产知名老牌 PDF 工具正式开源
- wifiphisher 依赖_铂瑞思:总是依赖别人的话,就永远也长不大
- Xshell代理访问外网或者公司的内网
- 浅谈前端自动化构建 -- Grunt、Gulp、FIS
- 大数据学习笔记31:Java程序访问高可用Hadoop集群
- qq发文件大小上限_微信推出新功能!网友:终于不用转QQ了
- [转]html控件、html服务器控件和web服务器控件的区别
- 【前端 · 面试 】HTTP 总结(四)—— HTTP 状态码
- 强悍的 Ubuntu —— 强悍的任意进制转换命令行工具 bc
- java inputstream长度_Java InputStream.available获取数据流字节长度大小
- hc06蓝牙模块介绍_微测评 | 小米智能插座蓝牙网关版
- 设计、定义并实现Complex类
- JAVA导出EXCEL表格
- word vba设置表格样式
- php win8 下载64位下载,万能驱动助理(e驱动) Win8.1 64位专版 6.6 官方版
- 没有基础一样可以一次性拿下CCSK认证?快来看这里!
- 服务器 支持sata硬盘,服务器SAS硬盘背板能插SATA硬盘吗?