支付宝支付框js代码
生活随笔
收集整理的這篇文章主要介紹了
支付宝支付框js代码
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先要說(shuō)明原理:
1.input:text框讓他層級(jí)最高,這邊要設(shè)置透明度,這樣保證遮蓋的盒子操作的box-shadow能看的到,讓文字的color設(shè)為背景色一致,這里設(shè)置為白色,在這樣就看不到默認(rèn)的字了
2.然后是給一個(gè)盒子來(lái)存放輸入的框,就是6個(gè)虛擬的密碼框,來(lái)顯示你輸入的個(gè)數(shù)
3.每個(gè)密碼框里面另外存放一個(gè)小盒子,背景色為黑色,border-radus設(shè)為50%,令其為圓形,模擬輸入的密碼
這邊的意思大概這樣,其他需要通過(guò)js來(lái)操作效果
全部代碼奉上(本文參考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; /*取消禁用選擇頁(yè)面元素*/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" //此處是禁止密碼復(fù)制粘貼的 autocomplete="off"//讓瀏覽器不自動(dòng)記錄之前輸入的值,很多時(shí)候，需要對(duì)客戶的資料進(jìn)行保密，防止瀏覽器軟件或者惡意插件獲取到在寫(xiě)的時(shí)候遇到一個(gè)問(wèn)題怎么也搞不定,朋友一句話就把我點(diǎn)醒了"行內(nèi)塊默認(rèn)有間距",這個(gè)是格式化不了的,只能通過(guò)浮動(dòng)解決
轉(zhuǎn)載于:https://www.cnblogs.com/QIQIZAIXIAN/p/6307638.html
總結(jié)
以上是生活随笔為你收集整理的支付宝支付框js代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Paxos 实现日志复制同步（Multi
- 下一篇： pythonpgzrun问题