支付宝支付框js代码

Posted 2020-08-28 九门提督琪琪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了支付宝支付框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>

oncontextmenu="return false" onpaste="return false" oncopy="return false" oncut="return false"  //此处是禁止密码复制粘贴的

autocomplete="off"//让浏览器不自动记录之前输入的值,很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到

在写的时候遇到一个问题怎么也搞不定,朋友一句话就把我点醒了"行内块默认有间距",这个是格式化不了的,只能通过浮动解决

以上是关于支付宝支付框js代码的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET Core在支付宝小程序中使用signalR