web仿微信支付界面，自定义模拟键盘

最新推荐文章于 2024-12-10 21:30:26 发布
最新推荐文章于 2024-12-10 21:30:26 发布
阅读量6.6k 收藏 14
点赞数 2
分类专栏： 原生web开发 文章标签： web仿微信支付界面，自定义模拟键盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43193877/article/details/102920728
版权

web仿微信支付界面，自定义模拟键盘
可谓是煞费苦心 还是自己技能不足，不过还是出来了
这里先声明：下面不是全部代码，想要全部代码的可以到个人主页下载
先看下效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
第一板块是html界面
有需要完整代码的可以到个人主页下载

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta content="telephone=no" name="format-detection">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>微信支付</title>

    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
</head>

<body>
    <div class="container paycont">
        <!-- 头部导航 -->
        <div class="header" style="box-shadow: 0px 0px 0px #fff;">
            <ul>
                <li class="header-left" onclick="history.back(-1)">
                    <img class="header-back" src="images/leftbtn.png" alt="">
                </li>
                <li>付款</li>
                <li class="header-right">
                </li>
            </ul>
        </div>
        <div class="fzk"></div>

        <div class="payDataBox">
            <div class="payData">
                <h3>付款给个人</h3>
                <p>斯坦森</p>
            </div>
            <div class="payDataImg"><img src="images/lookimg5.png" alt=""></div>
        </div>

        <!-- 键盘与输入框 -->
        <div class="container-fluid">
            <div class="keyboard-show-text"></div>
            <div class="keyboard-box"></div>
        </div>

        <!-- 弹窗 -->
        <div class="passwordAlert">
            <p class="payUser">付款给 斯坦森</p>
            <p class="payMoneyAlert">￥<span class="payMoneyData"></span></p>
            <div class="keyboard-show-password"></div>
        </div>

        <!-- 支付错误弹窗 -->
        <div class="error">
            <p class="errorBt">支付密码错误，请重试</p>
            <div class="errorBtn">
                <a class="forgetmm" href="">忘记密码</a>
                <span class="retryBtn">重试</span>
            </div>
        </div>
    </div>
    <script src="js/size.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/keyboard.js"></script>
    <script src="layer/layer.js"></script>
    <script type="text/javascript">
        // keyboard-operation-submit
        $(function () {
            jianpan();
        })
        $(document).on('click', '#subBtn', function () {
            var type = $(this).attr('btn_type');
            if (type == 'money') {
                submitBtn();
            } else if (type == 'password') {
                payBtn();
            }
        })

        function jianpan() {
            // 模拟键盘
            $(".keyboard-box").KeyBoard({
                random: false, // 随机键盘
                type: "money", // 密码 password or 金额 money
                show: $(".keyboard-show-text"), // 展示区域
                safe: false // 加密显示
            });

        }


        // 确认
        function submitBtn(e) {
            var payMoney = Global_show.find(".input_").val(); //获取输入金额
            if (payMoney != '') {
                //自定页
                layer.open({
                    offset: '3rem',
                    type: 1,
                    title: '请输入支付密码',
                    closeBtn: 1, //不显示关闭按钮
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    content: $('.passwordAlert'),
                    end: function () {
                        $('.keyboard-box').html(''); //销毁时清除键盘
                        if (Global_type == "password" && Global_count > 0) { //判断密码已经输入了多少，销毁时删除多少
                            Global_show.find(".input_" + Global_count).val("");
                            Global_count = Global_count - Global_count;
                            // console.log(Global_count)
                        }
                        $('.keyboard-show-password').html(''); //销毁时清除输入框
                        jianpan(); //销毁时加载键盘
                        $('.numBox input').attr('value', payMoney); //销毁时给新的输入框重新赋刚刚输入的值
                        console.log(payMoney);
                    }
                });

                $('.payMoneyData').html(payMoney);
                $('.keyboard-box').html('');

                // 模拟键盘
                $(".keyboard-box").KeyBoard({
                    random: false, // 随机键盘
                    type: "password", // 密码 password or 金额 money
                    show: $(".keyboard-show-password"), // 展示区域
                    safe: true // 加密显示
                });

            }
            return payMoney
            // console.log(payMoney);
        };

        //密码确认
        function payBtn(e) {
            var payPassword = Global_show.find(".input_").val(); //获取密码
            var payPasswordLen = payPassword.length; //获取密码长度
            console.log(payPasswordLen + 'len');
            var i = 0;
            if (i == 0 && payPasswordLen == 6) { //判断
                $('#subBtn').attr('href', 'success.html');
            } else {
                var obj = $('.payMoneyData').html(); //清除之前先获取金额值
                parent.layer.closeAll(); //关闭所有弹窗
                hiddenKeyboard(); //键盘隐藏
                $('.keyboard-box').html(''); //销毁时清除键盘

                //自定页
                layer.open({
                    type: 1,
                    title: '请输入支付密码',
                    closeBtn: 1, //不显示关闭按钮
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    content: $('.error'),
                    end: function () {
                        $('.keyboard-box').html(''); //销毁时清除键盘
                        if (Global_type == "password" && Global_count > 0) { //判断密码已经输入了多少，销毁时删除多少
                            Global_show.find(".input_" + Global_count).val("");
                            Global_count = Global_count - Global_count;
                            console.log(Global_count)
                        }
                        jianpan(); //销毁时加载键盘
                        $('.keyboard-show-password').html(''); //销毁时清除输入框

                        $('.numBox input').attr('value', obj); //销毁时给新的输入框重新赋刚刚输入的值
                        hiddenKeyboard(); //键盘显示
                    }
                });
                $('.forgetmm').click(function () { //忘记密码进行跳转
                    $('.forgetmm').attr('href', '#');
                })
                $('.retryBtn').click(function () { //重试按钮 关闭所有弹窗
                    parent.layer.closeAll();
                })
            }
        }
    </script>

</body>

</html>

第二版块是css界面
/* 公共样式表css */

html,
body {
    color: #333;
    margin: 0;
    min-height: 100%;
    font-family: serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* transition: all .3s ease-in-out 0s;  */
}

a {
    text-decoration: none;
    color: #333;
}

a,
label,
button,
input,
select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
    border: 0;
}

body {
    background-color: #F3F3F3;
    color: #333;
    position: relative;
}

html,
body,
div,
dl,
dt,
dd,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
button,
fieldset,
form,
input,
legend,
textarea,
th,
td {
    margin: 0;
    padding: 0;
    word-break: break-all;
    letter-spacing: 1px;
}


button {
    outline: 0;
}

img {
    border: 0;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
    font-size: 0.28rem;
}

li {
    list-style: none;
}

body {
    margin: 0 auto;
    overflow-x: hidden;
}

.clearfix {
    clear: both;
}

p,
li,
span,
a,
input,
select,
textarea,
button,
label {
    font-size: 0.28rem;
    color: #000;
    word-break: break-all;
}

/* 容器 */
.container {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    /* background: #08154f; */
}
/* 固定头部 */
.header {
    height: 0.86rem;
    line-height: 0.86rem;
    color: #E3F0FB;
    position: fixed;
    top: 0;
    font-size: 0.36rem;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 0px 4px #eee;
    width: 100%;
    padding: 0 0.2rem;
    z-index: 100;
}

.header ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header-back {
    width: 0.4rem;
    height: 0.4rem;
    margin-top: .23rem;
    float: left;
}

.header ul li:nth-child(2) {
    font-size: 0.34rem;
    width: 60%;
    text-align: center;
    /* font-weight: bold; */
    font-family: "黑体";
}

.header ul li:nth-child(2) img {
    width: 0.7rem;
    display: block;
    margin: 0.09rem auto;
}

.header-left {
    width: 20%;
    text-align: left;
}

.header-right {
    width: 20%;
    text-align: right;
}

.header-right a {
    color: #333;
}

.header-right a img {
    width: 0.4rem;
    height: 0.4rem;
    margin-top: .2rem;
}

.fzk {
    width: 100%;
    height: 0.86rem;
}

/* 虚拟键盘样式 */
@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../font/iconfont.woff2') format('woff2'),
        url('../font/iconfont.woff') format('woff'),
        url('../font/iconfont.ttf') format('truetype'),
        url('../font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: .26rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.paycont {
    height: 100vh;
    background-color: #F3F3F3;
}

.container-fluid {
    height: 100%;
    background: #fff;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.keyboard-box {
    background: #fff;
    font-size: 18px;
    position: fixed;
    bottom: 0;
    left: 15px;
    right: 15px;
    z-index: 99999999;
}

.keyboard-box .row {
    background: #fff;
}

.keyboard-box i {
    font-size: 24px;
}

.keyboard-numBtn .row .col-xs-4,
.keyboard-operation .row_1 .col-xs-12 {
    border-top: 1px solid #ddd;
    text-align: center;
    height: 1.1rem;
    line-height: 1.1rem;
}

.keyboard-numBtn .row .col-xs-4 {
    border-right: 1px solid #ddd;
}

.keyboard-numBtn .row .col-xs-4:active {
    background: #ddd;
}

.keyboard-operation-delete:active {
    background: #ddd;
}

.keyboard-operation .row_2 .col-xs-12 {
    border-top: 1px solid #ddd;
    text-align: center;
    color: #fff;
    height: 3.3rem;
    line-height: 3.3rem;
    text-decoration: none;
}

.keyboard-operation-submit {
    background: #2aad63;
}

.keyboard-operation-submit:active {
    background: #1a8d4c;
}

.keyboard-show-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: .5rem;
}

.keyboard-show-text input[disabled] {
    background: #fff;
    border: none;
    opacity: 1;
    color: #333;
    -webkit-text-fill-color: #333;
    text-align: center;
}

.moneyInp {
    text-align: left !important;
}

.keyboard-money,
.keyboard-password {
    padding: 15px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.numBox {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #ddd !important;
}

.numBox span {
    font-size: .6rem;
    font-weight: bold;
    line-height: 1.27rem;
}

.keyboard-password {
    width: 100%;
    /* border-bottom: 1px solid #ddd !important; */
}

/* 付款信息 */
.payDataBox {
    width: 100%;
    padding: .35rem .5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.payData {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.payData h3 {
    font-size: .3rem;
}

.payData p {
    font-size: .24rem;
    color: #999;
}

.payDataImg {
    width: 1rem;
    height: 1rem;
    border-radius: 5px;
    overflow: hidden;
}

.payDataImg img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 密码弹窗 */
.layui-layer-page {
    width: 80%;
    border-radius: 10px !important;
    overflow: hidden;
}

.layui-layer-title {
    padding: 0 !important;
    text-align: center;
    background-color: #fff !important;
}

.layui-layer-setwin {
    right: none !important;
    left: 10px;
}

.payUser {
    font-size: .26rem;
    padding: .3rem;
    text-align: center;
}

.payMoneyAlert {
    font-size: .35rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: .1rem;
}

.payMoneyAlert span {
    font-size: .45rem;
    font-weight: bold;
}

.keyboard-show-textAlert {
    width: 86%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0.3rem auto;
}

.keyboard-show-textAlert input[disabled] {
    background: #fff;
    border: none;
    opacity: 1;
    color: #333;
    -webkit-text-fill-color: #333;
    text-align: center;
    font-size: 1rem;
    padding-bottom: .09rem;
}

.keyboard-money {
    width: 15%;
    border: 1px solid #ddd !important;
    margin: 0 -1px 0 0;
    height: .774rem;
}

.keyboard-show-password {
    width: 80%;
    margin: .2rem auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.keyboard-money {
    padding: 0;
    background: #fff;
}

/* 错误弹窗 */
.error {
    width: 100%;
    background: #fff;
}

.errorBt {
    text-align: center;
    padding: .5rem 0;
    border-bottom: 1px solid #ddd;
}

.errorBtn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.errorBtn a {
    width: 50%;
    font-size: .32rem;
    text-align: center;
    padding: .3rem 0;
}

.errorBtn span {
    width: 50%;
    font-size: .32rem;
    text-align: center;
    padding: .3rem 0;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    color: rgb(54, 85, 141);
}

剩下的就是生成输入框与键盘的js了，已将文件放入。
完成！可喜可贺 放一挂鞭庆祝一下 再次谢谢我孙大哥的鼎力帮助！

【uniapp】仿微信支付界面
Komorebi_00的博客
10-26 1274
仿微信支付界面键盘实现
微信支付模拟
最新发布
weixin_51635918的博客
03-19 310
【代码】微信支付模拟。
仿微信支付页面
lml_little的博客
05-27 7929
jQuery微信支付代码 $(function(){ //出现浮动层 $(".ljzf_but").click(function(){ $(".ftc_wzsf").show(); }); //关闭浮动 $(".close").click(function(){ $(".ftc_wzsf").hide(); }); //数字显示隐藏 $(".xiaq_tb
html模仿微信支付页面
04-05
html css jquery 模仿微信支付页面，用于微信公众号支付，展示微信支付页面。jquery微信支付代码
H5仿微信支付键盘
酷玩时刻-By Javen
10-01 5204
H5仿微信支付键盘 自定义支付键盘 项目开源地址欢迎Start： https://github.com/Javen205/IJPay https://github.com/Javen205/IJPay-Demo
仿微信支付页面html
01-17
请填写资源的Tag
Android仿支付宝微信支付界面
05-19
仿支付宝微信支付界面
H5仿微信支付数字键盘.zip
04-25
【H5仿微信支付数字键盘】是一个基于HTML5和CSS3技术实现的界面设计项目，其目的是为了在网页上模拟微信支付过程中用户输入密码时所使用的数字键盘。这个设计不仅提升了用户体验，还使得网页支付过程更加贴近原生...
仿微信支付界面与自定义键盘的Web实现
2. 自定义模拟键盘：在本项目中，自定义模拟键盘可能指的是在网页中实现的一个输入键盘，它不同于标准的键盘输入，可以用于输入特定格式的数据，如密码、短信验证码等。自定义键盘的设计与实现涉及到HTML、CSS和...
微信支付.rar
11-06
本文将深入探讨如何在Web环境中实现一个仿微信支付的界面，并重点介绍自定义模拟键盘的设计与实现。 首先，微信支付的Web界面设计需注重用户体验，它应该简洁、直观，同时保持与微信APP的视觉一致性。这包括色彩...
仿微信/支付宝数字支付界面
06-16
仿微信/支付宝数字支付界面，源码下载，需要的亲不要吝啬分数啊，我也需要积分向别人学习啊
仿微信支付首页html代码
01-16
微信支付页面，只有首页html代码，使用 WeUI 制作，仿微信钱包 H5 页面模板。 收付款、钱包、腾讯服务、第三方服务等功能。并且兼容了 iPhone X、iPhone X Max、 iPhone XR 等机型，仅供学习交流，请勿用于商业用途
jQuery仿微信手机支付页面代码
05-17
jQuery仿微信手机支付页面代码
Android 仿微信支付
01-04
Android 仿微信支付demoAndroid 仿微信支付demoAndroid 仿微信支付demoAndroid 仿微信支付demo
H5微信支付金额键盘带小数点
11-29
它通过自定义键盘组件，提升了用户在微信支付过程中的输入体验，降低了支付流程的复杂性，从而增加了支付成功率。在实际开发中，我们可以借鉴这种做法，结合具体需求进行定制，以打造更高效、友好的支付H5页面。
HTML5 Web仿微信界面设计与实现
m0_74825634的博客
12-10 1118
简介：本项目利用HTML5和CSS3技术构建网页应用，模仿微信的聊天界面，提供类似微信的用户体验。涉及关键知识点包括HTML5的离线存储、Canvas绘图、Web Storage、WebSocket，以及CSS3的圆角边框、阴影效果、背景平铺、媒体查询、Flexbox布局、Transitions和Animations。同时，项目通过JavaScript和jQuery实现事件监听、AJAX异步请求和DOM操作，确保兼容性和良好的用户友好性、响应式设计。
APIcloud仿微信支付界面样式和功能
CSAN_Y的博客
08-01 517
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detecti
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值