首页 / JAVASCRIPT / 如何利用JS实现仿微信支付弹窗功能

如何利用JS实现仿微信支付弹窗功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何利用JS实现仿微信支付弹窗功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8380字，纯文字阅读大概需要12分钟。

内容图文

这篇文章主要介绍了JS实现仿微信支付弹窗功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

先奉上效果图

如何利用JS实现仿微信支付弹窗功能 - 文章图片

html代码

<!DOCTYPE html> 
<html> 
  <head> 
    <title>仿手机微信支付输入密码界面效果</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" /> 
    <link rel="stylesheet" type="text/css" href="css/rest.css" rel="external nofollow" /> 
  </head> 
  <body> 
    <!-- 打开弹窗按钮 --> 
    <button id="myBtn">去支付</button> 
    <!-- 弹窗 --> 
    <p id="myModal" class="modal"> 
      <!-- 弹窗内容 --> 
      <p class="modal-content"> 
        <p class="paymentArea"> 
          <p class="paymentArea-Entry"> 
            <p class="paymentArea-Entry-Head"> 
              <img src="images/xx_03.jpg" class="close" /> 
              <img src="images/jftc_03.png" class="useImg"> 
              <span class="tips-txt">请输入支付密码</span> 
            </p> 
            <p class="paymentArea-Entry-Content"> 
              <p class="pay-name">测试商品</p> 
              <p class="pay-price">￥88.88</p> 
            </p> 
            <ul class="paymentArea-Entry-Row"></ul> 
          </p> 
          <p class="paymentArea-Keyboard"> 
            <h4> 
              <img src="images/jftc_14.jpg" height="10" /> 
            </h4> 
            <ul class="target"> 
              <li> 
                <a>1</a> 
                <a>2</a> 
                <a>3</a> 
              </li> 
              <li> 
                <a>4</a> 
                <a>5</a> 
                <a>6</a> 
              </li> 
              <li> 
                <a>7</a> 
                <a>8</a> 
                <a>9</a> 
              </li> 
              <li> 
                <a>清空</a> 
                <a> 0 </a> 
                <a>删除</a> 
              </li> 
            </ul> 
          </p> 
        </p> 
      </p> 
    </p> 
  </body> 
</html>

css

body { 
        margin: 0; 
        padding: 0; 
        font-size: 0.3rem; 
        font-family: "微软雅黑", arial; 
      } 
      ul, 
      li { 
        margin: 0; 
        padding: 0; 
        list-style: none; 
      } 
      img { 
        display: block; 
      } 
      #myBtn { 
        display: block; 
        width: 80%; 
        height: auto; 
        margin: 5rem auto; 
        padding: 0.2rem; 
        border-radius: 5px; 
        border: 0; 
        outline: none; 
        font-family: "微软雅黑"; 
        color: #fff; 
        background-color: #5CB85C; 
      } 
      /* 弹窗 */ 
      .modal { 
        display: none; 
        /* 默认隐藏 */ 
        position: fixed; 
        z-index: 1; 
        left: 0; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgb(0, 0, 0); 
        background-color: rgba(0, 0, 0, 0.4); 
        -webkit-animation-name: fadeIn; 
        -webkit-animation-duration: 0.4s; 
        animation-name: fadeIn; 
        animation-duration: 0.4s 
      } 
      /* 弹窗内容 */ 
      .modal-content { 
        position: fixed; 
        bottom: 0; 
        /*background-color: #fefefe;*/ 
        width: 100%; 
        -webkit-animation-name: slideIn; 
        -webkit-animation-duration: 0.4s; 
        animation-name: slideIn; 
        animation-duration: 0.4s 
      } 
      /** 
       * 支付弹窗样式 
       * **/ 
      .paymentArea-Entry { 
        width: 90%; 
        margin: 0 auto; 
        padding-bottom: 0.3rem; 
        background-color: #fff; 
      } 
      .paymentArea-Entry-Head { 
        display: flex; 
        display: -webkit-flex; 
        height: 0.8rem; 
        line-height: 0.8rem; 
        padding: 0.2rem; 
        border-bottom: 1px solid #5CB85C; 
      } 
      /* 关闭按钮 */ 
      .paymentArea-Entry-Head .close { 
        width: 0.5rem; 
        height: 0.5rem; 
        padding: 0.15rem 0.15rem 0.15rem 0; 
      } 
      .paymentArea-Entry-Head .close:hover, 
      .paymentArea-Entry-Head .close:focus { 
        color: #000; 
        text-decoration: none; 
        cursor: pointer; 
      } 
      .paymentArea-Entry-Head .useImg { 
        width: 0.8rem; 
        height: 0.8rem; 
        margin-right: 0.15rem; 
      } 
      .paymentArea-Entry-Head .tips-txt { 
        font-size: 0.4rem; 
      } 
      .paymentArea-Entry-Content { 
        position: relative; 
        padding: 0.2rem 0; 
        text-align: center; 
      } 
      .paymentArea-Entry-Content:after { 
        content: ""; 
        position: absolute; 
        bottom: 0; 
        left: 0.3rem; 
        right: 0.3rem; 
        height: 1px; 
        background-color: #ddd; 
      } 
      .paymentArea-Entry-Content .pay-name { 
        font-size: 0.3rem; 
      } 
      .paymentArea-Entry-Content .pay-price { 
        font-size: 0.4rem; 
        font-weight: bold; 
      } 
      ul.paymentArea-Entry-Row { 
        display: flex; 
        display: -webkit-flex; 
        justify-content: space-between; 
        margin: 0.2rem 0.3rem 0 0.3rem; 
        padding: 0; 
        border: 1px solid #a2a2a2; 
      } 
      ul.paymentArea-Entry-Row li { 
        position: relative; 
        flex-grow: 1; 
        min-width: 1rem; 
        height: 0.8rem; 
        line-height: 0.8rem; 
        text-align: center; 
        border-right: 1px solid #ddd; 
      } 
      ul.paymentArea-Entry-Row li:last-child { 
        border-right: 0; 
      } 
      ul.paymentArea-Entry-Row li img { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        width: 0.5rem; 
        height: 0.5rem; 
        margin: -0.25rem 0 0 -0.25rem; 
      } 
      .paymentArea-Keyboard { 
        margin-top: 1.2rem; 
        background-color: #fff; 
      } 
      .paymentArea-Keyboard h4 { 
        height: 0.5rem; 
        line-height: 0.5rem; 
        margin: 0; 
        text-align: center; 
      } 
      .paymentArea-Keyboard h4 img { 
        width: 0.93rem; 
        height: 0.32rem; 
        margin: 0 auto; 
      } 
      .paymentArea-Keyboard h4:active { 
        background-color: #e3e3e3; 
      } 
      .paymentArea-Keyboard ul { 
        border-top: 1px solid #ddd; 
      } 
      .paymentArea-Keyboard li { 
        display: flex; 
        display: -webkit-flex; 
        justify-content: space-between; 
        border-bottom: 1px solid #ddd; 
      } 
      .paymentArea-Keyboard li a { 
        flex-grow: 1; 
        display: block; 
        min-width: 1rem; 
        line-height: 1rem; 
        border-right: 1px solid #ddd; 
        font-size: 0.3rem; 
        text-align: center; 
        text-decoration: none; 
        color: #000; 
      } 
      .paymentArea-Keyboard li:last-child, 
      .paymentArea-Keyboard li a:last-child { 
        border: 0; 
      } 
      .paymentArea-Keyboard li a:active { 
        outline: none; 
        background-color: #ddd; 
      } 
      /* 添加动画 */ 
      @-webkit-keyframes slideIn { 
        from { 
          bottom: -300px; 
          opacity: 0 
        } 
        to { 
          bottom: 0; 
          opacity: 1 
        } 
      } 
      @keyframes slideIn { 
        from { 
          bottom: -300px; 
          opacity: 0 
        } 
        to { 
          bottom: 0; 
          opacity: 1 
        } 
      } 
      @-webkit-keyframes fadeIn { 
        from { 
          opacity: 0 
        } 
        to { 
          opacity: 1 
        } 
      } 
      @keyframes fadeIn { 
        from { 
          opacity: 0 
        } 
        to { 
          opacity: 1 
        } 
      }

//定义根目录字体大小，通过rem实现适配 
      document.addEventListener("DOMContentLoaded", function() { 
        var html = document.documentElement; 
        var windowWidth = html.clientWidth; 
        //console.log(windowWidth) 
        html.style.fontSize = windowWidth / 7.5 + "px"; 
      }, false); 
      // 获取弹窗 
      var modal = document.getElementById('myModal'); 
      // 打开弹窗的按钮对象 
      var btn = document.getElementById("myBtn"); 
      // 获取 <span> 元素，用于关闭弹窗 that closes the modal 
      var span = document.getElementsByClassName("close")[0]; 
      /*创建密码输入框*/ 
      var entryArea = document.querySelector(".paymentArea-Entry-Row"); 
      for(var i = 0; i < 6; i++) { 
        var li = document.createElement("li"); 
        entryArea.appendChild(li); 
      } 
      /*键盘操作*/ 
      var doms = document.querySelectorAll('ul li a'); 
      var entryLis = document.querySelectorAll(".paymentArea-Entry-Row li"); 
      var pwds = ""; //存储密码 
      var count = 0; //记录点击次数 
      for(var i = 0; i < doms.length; i++) { 
        ! function(dom, index) { 
          dom.addEventListener('click', function() { 
            var txt = this.innerHTML; 
            switch(txt) { 
              case "清空": 
                if(count != 0) { 
                  for(var i = 0; i < entryLis.length; i++) { 
                    entryLis[i].innerHTML = ""; 
                  } 
                  pwds = ""; 
                  count = 0; 
                  console.log(pwds) 
                  console.log(count) 
                } 
                break; 
              case "删除": 
                if(count != 0) { 
                  console.log(pwds) 
                  entryLis[count - 1].innerHTML = ""; 
                  pwds = pwds.substring(0, pwds.length - 1); 
                  count--; 
                  console.log(pwds) 
                  console.log(count) 
                } 
                break; 
              default: 
                /*通过判断点击次数 向输入框填充内容*/ 
                if(count < 6) { 
                  /*创建一个图片对象 插入到方框中*/ 
                  var img = new Image(); 
                  img.src = "images/dd_03.jpg"; 
                  entryLis[count].appendChild(img); 
                  /*为存储密码的对象赋值*/ 
                  if(pwds == "") { 
                    pwds = txt; 
                  } else { 
                    pwds += txt; 
                  } 
                  count++; 
                  if(pwds.length == 6) { 
                    location.href = "https://www.baidu.com"; 
                  } 
                } else { 
                  return; 
                  alert("超出限制") 
                } 
            } 
          }); 
        }(doms[i], i); 
      } 
      // 点击按钮打开弹窗 
      btn.onclick = function() { 
        modal.style.display = "block"; 
      } 
      // 点击 <span> (x), 关闭弹窗 
      span.onclick = function() { 
        modal.style.display = "none"; 
        if(count != 0) { 
          for(var i = 0; i < entryLis.length; i++) { 
            entryLis[i].innerHTML = ""; 
          } 
          pwds = ""; 
          count = 0; 
        } 
      } 
      // 在用户点击其他地方时，关闭弹窗 
      window.onclick = function(event) { 
        if(event.target == modal) { 
          modal.style.display = "none"; 
          if(count != 0) { 
          for(var i = 0; i < entryLis.length; i++) { 
            entryLis[i].innerHTML = ""; 
          } 
          pwds = ""; 
          count = 0; 
        } 
        } 
      } 
      /*开关键盘*/ 
      var openKey = document.querySelector(".paymentArea-Entry-Row"); 
      var switchOfKey = document.querySelector(".paymentArea-Keyboard h4"); 
      switchOfKey.addEventListener('click', function() { 
        var KeyboardH = document.querySelector(".paymentArea-Keyboard").clientHeight; 
        document.querySelector(".paymentArea-Keyboard").style.height = KeyboardH + "px"; 
        document.querySelector(".paymentArea-Keyboard").style.backgroundColor = "transparent"; 
        document.querySelector(".paymentArea-Keyboard h4").style.display = "none"; 
        document.querySelector(".paymentArea-Keyboard ul").style.display = "none"; 
      }) 
      openKey.addEventListener('click', function() { 
        document.querySelector(".paymentArea-Keyboard").style.backgroundColor = "#fff"; 
        document.querySelector(".paymentArea-Keyboard h4").style.display = "block"; 
        document.querySelector(".paymentArea-Keyboard ul").style.display = "block"; 
      })

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的如何利用JS实现仿微信支付弹窗功能全部内容，希望文章能够帮你解决如何利用JS实现仿微信支付弹窗功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/286196.html

来源：【匿名】

【上一篇】js中实现限制uploadify的上传个数【下一篇】javascript 怎么调用php方法

更多 ►

【如何利用JS实现仿微信支付弹窗功能】教程文章相关的互联网学习教程文章

微信支付：JSAPI支付一直提示URL未注册

今天意外碰上了这个问题，想想微信的坑真多……解决办法：　　首先要看微信公众号里的支付授权目录是否已正确填写，还要验证 url大小写必须相同　　其次查看一下自己请求的地址是否与上面填写的是否一样！url大小写也要一样！url地址不能多：/ 或 \ 不然就会报错未注册（今天我就因为多了一个 / ）！　　最后：反正出现未注册问题，大多都是url的问题了，其于的没见过……原文：http://www.cnblogs.com/zwb121/p/5487628.html

如何利用JS实现仿微信支付弹窗功能【图】

这篇文章主要介绍了JS实现仿微信支付弹窗功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下先奉上效果图html代码<!DOCTYPE html> <html> <head> <title>仿手机微信支付输入密码界面效果</title> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/rest.css" rel="external nof...

javascript-微信支付redirect_uri报错

代码没有问题，授权目录也检查过了没有问题。最尴尬的问题的是同样是从微信浏览器中打开，如果我从对话框中的链接打开，支付页面可以调起，如果我从商户公众号进入，就会报redirect——uri的错误，这特么就很尴尬了。。。有谁遇到过此类问题吗？回复内容：代码没有问题，授权目录也检查过了没有问题。最尴尬的问题的是同样是从微信浏览器中打开，如果我从对话框中的链接打开，支付页面可以调起，如果我从商户公众号进入，就会报red...

微信支付服务商模式（受理机构模式）开发注意事项，jsapi支付

1.首先下载的demo，一般都是有些bug的，先要改一下。2.微信貌似没有为服务商模式单独开发demo，下载的也都是普通商户的支付demo，其实这里没有必要单独写，因为他们区别就是几个参数的区别。（0）demo里设置的参数全部都要填服务商的，而不是子商户的。（1）第一个区别是openid，demo里直接传的openid，服务商模式需要传sub_openid，获取的方式就不说明了，总之获取所需都是子商户即特约商户的appid，appsecret。（2）需要在传入页...

javascript-大家好，微信支付判断是否为微信浏览器，上全部代码。

需求是这样的用户在微信中打开就采用微信支付，非微信浏览器就是支付宝支付，我用下面的方法是否靠谱呢？？if(typeof(WeixinJSBridge)!=undefined && WeixinJSBridge){alert(微信浏览器);}else{alert(普通浏览器);}回复内容：需求是这样的用户在微信中打开就采用微信支付，非微信浏览器就是支付宝支付，我用下面的方法是否靠谱呢？？if(typeof(WeixinJSBridge)!=undefined && WeixinJSBridge){alert(微信浏览器);}else{alert(普通浏...

微信支付（ios）调用jsapi缺少参数$key0$？

是按照微信官网JSAPI v3版本的方式完成的微信支付，安卓手机上已实现支付，但在苹果手机上，支付时会出现缺少这个$key0$离奇的参数？求助啊求助！！！改$this->values['time_stamp'] = (string)$value;这一行之后并没有什么作用！回复内容：是按照微信官网JSAPI v3版本的方式完成的微信支付，安卓手机上已实现支付，但在苹果手机上，支付时会出现缺少这个$key0$离奇的参数？求助啊求助！！！改$this->values[time_stamp] = (string...

javascript-请问微信支付V3，在支付成功后通过哪个回调的值更新订单状态呢？

请问微信支付V3版本，使用jsapi调用微信支付，用户支付成功，服务器回调参数到notify.php，那问题来了，通过回调哪个值去更新数据库中记录的订单状态呢？回复内容：请问微信支付V3版本，使用jsapi调用微信支付，用户支付成功，服务器回调参数到notify.php，那问题来了，通过回调哪个值去更新数据库中记录的订单状态呢？out_trade_no 这个字段是微信服务器返回的商户唯一订单ID，根据这个执行update就行！！！$unifiedOrder->setPar...

javascript-微信支付，使用url传递参数

是这样，我目前需要实现使用扫描二维码支付的一个功能。我将二维码做成一个url链接，然后在链接中调用JSAPI发起收费，现在的问题是我的二维码中需要包含一个参数（商品ID），然后由不同的ID进行收费，最后记录，而且考虑到可能会有无限多的商品种类所以不可能都给做成子网页。现在的问题是我使用http://shop.com/?id=100这样的链接微信会认为？后面的部分也是链接的一部分，并不能传递参数，请问各位是怎么实现的呢？回复内容：是...

微信支付之JSAPI公众号支付详解【图】

前提本教程默认以下几点你已经完全满足：开通了认证后的服务号服务号开通的微信支付的认证腾讯给你的邮件中有商户登录的账号和密码拥有一个可供上传代码和设置回调域名的网站或云服务有一点点php知识。开通了认证后的服务号服务号开通的微信支付的认证腾讯给你的邮件中有商户登录的账号和密码拥有一个可供上传代码和设置回调域名的网站或云服务有一点点php知识。第一步：公众号设置 1、你的公众号，在支付认证的标签下，内容应...

前端调用微信支付接口

支付按钮的点击事件$(.Save_Patient_Msg).click(function(){$(.Save_Patient_Msg).off(click);var hrdfId = getOrderId();var txnAmt = $(.sum_pay.font-red).html(); var data = {orderId: hrdfId, txnAmt: "0.01", prodDesc: "远程诊断服务", callType: "JSAPI",access_token: getUrlParam("access_token")};$.ajax({type: POST,url: /hims/api/commonPay/queryTransNo?access_token= getUrlParam(access_token),dataType:json,c...

在nodejs中如何实现微信支付

这篇文章主要为大家详细介绍了基于nodejs实现微信支付功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了nodejs实现微信支付的具体代码，供大家参考，具体内容如下通过nodejs使用微信支付最重要的就是微信的签名，在这里md5后的字符必须转化为大写一、回复微信通知消息模版message.ejs<xml> <return_code><![CDATA[<%-return_code%>]]></return_code> <return_msg><![CDATA[<%=return_msg%>]]></return_...

通过vue.js实现微信支付

下面我就为大家分享一篇vue.js 微信支付前端代码。具有很好的参考价值。希望对大家有所帮助。实例如下所示：onBridgeReady: function () {const openId = localStorage.getItem(openId)payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型，可不填this.message = rt.tWeixinJSBridge.invoke(getBrandWCPayRequest, {appId: this.message.appId,timeStamp: this.message.timeStamp,nonceStr: thi...

nodejs如何实现微信支付

这次给大家带来nodejs如何实现微信支付，nodejs实现微信支付的注意事项有哪些，下面就是实战案例，一起来看一下。通过nodejs使用微信支付最重要的就是微信的签名，在这里md5后的字符必须转化为大写一、回复微信通知消息模版message.ejs<xml> <return_code><![CDATA[<%-return_code%>]]></return_code> <return_msg><![CDATA[<%=return_msg%>]]></return_msg> </xml>二、微信支付model文件代码wxpay.jsvar config = require(../con...

nodejs实现微信支付功能实例详解

通过nodejs使用微信支付最重要的就是微信的签名，在这里md5后的字符必须转化为大写，本文主要为大家详细介绍了基于nodejs实现微信支付功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。一、回复微信通知消息模版message.ejs<xml> <return_code><![CDATA[<%-return_code%>]]></return_code> <return_msg><![CDATA[<%=return_msg%>]]></return_msg> </xml>二、微信支付model文件代码wxpay.jsvar config ...

实例详解node.js实现微信支付退款功能【图】

微信开发越来越流行，我们知道在微信中有付款也有退款功能，这样的功能非常常见，这篇文章主要介绍了node.js实现微信支付退款功能,需要的朋友可以参考下，希望能帮助到大家。缘起有付款就会有退款注意，退款支持部分退款左口袋的钱退到右口袋罗这次发起的退款请求0.01元是实时到账的，因此，用户在小程序端发起的退款只是一个请求到后台，后台审核人员审核无误后才后微信发起退款操作。引入第三方module在package.json 中加入"wei...

首页 / JAVASCRIPT / 如何利用JS实现仿微信支付弹窗功能

如何利用JS实现仿微信支付弹窗功能

内容导读

内容图文

内容总结

内容备注

内容手机端

【如何利用JS实现仿微信支付弹窗功能】教程文章相关的互联网学习教程文章

功能 - 相关标签

支付 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程