Use jquery to implement a payment keyboard similar to Alipay on the mobile terminal (code)

The content of this article is about using jquery to implement a payment keyboard similar to Alipay on the mobile terminal. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When I was working on a project recently, I encountered a need, which is to click the payment button on the mobile payment page to pop up a payment keyboard, similar to Alipay. Since the project is just a mobile website, not an app, this function must be implemented by the front end. Without further ado, let’s take a look at the picture to see the effect.

Nima, isn’t this the payment keyboard on the Alipay app? That's right, our UI is based on the keyboard made by Alipay. You may ask, why not directly call the payment interface provided by Alipay. Well, because the project requires it, I won’t explain much here.

Let’s take a look at the renderings after implementation

<!-- 支付键盘 -->
    <divclass="pay-container">
        <divclass="pay-title">
            <spanclass="pay-title-remove">×</span>
            输入支付密码
        </div>
        <divclass="pay-body">
            <divclass="input-container">
                <inputclass="input-item"type="password"readonly>
                <inputclass="input-item"type="password"readonly>
                <inputclass="input-item"type="password"readonly>
                <inputclass="input-item"type="password"readonly>
                <inputclass="input-item"type="password"readonly>
                <inputclass="input-item"type="password"readonly>
            </div>
            <divclass="forgetPwd-container">
                <aclass="forgetPwd"href="">忘记密码？</a>
            </div>
            <divclass="key-container">
                <divclass="key-item">1</div>
                <divclass="key-item">2</div>
                <divclass="key-item">3</div>
                <divclass="key-item">4</div>
                <divclass="key-item">5</div>
                <divclass="key-item">6</div>
                <divclass="key-item">7</div>
                <divclass="key-item">8</div>
                <divclass="key-item">9</div>
                <divclass="key-item empty"></div>
                <divclass="key-item">0</div>
                <divclass="key-item remove"></div>
            </div>
        </div>
    </div>

Core JS part

.pay-container{ width:7.5rem; height:8rem; background-color:#fbf9fb; position:fixed;z-index:999; overflow:hidden;display:none; }
/* .pay-container-show{transform: translate3d(0, -8.9rem, 0);transition: 0.5s ease;transform: translate3d(0, 0, 0); transition: 0.5s ease;} */
.pay-title{ height:0.96rem; line-height:0.96rem; border-bottom:1pxsolid#b3afaf; text-align:center; color:#070707;
position:relative; font-size:0.36rem;}
.pay-title.pay-title-remove{ width:0.24rem; height:0.24rem; position:absolute; top:0.35rem; left:0.33rem; line-height:0.28rem;
font-size:0.45rem;}
.pay-body{ padding-top:0.56rem;position:relative; height:7rem; 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;}

There is only so much code and it is not complicated. It may be crudely written, but the effect can be seen. Related recommendations:

JQuery Mobile Alipay mobile payment page

Who can tell me about the process of going to Alipay to pay from the mobile client and then returning? ?

android client Alipay php server-side writing

The above is the detailed content of Use jquery to implement a payment keyboard similar to Alipay on the mobile terminal (code). For more information, please follow other related articles on the PHP Chinese website!