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

这篇文章将为大家详细讲解有关JS如何实现仿微信支付弹窗功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在汾西等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供做网站、成都做网站 网站设计制作定制制作,公司网站建设,企业网站建设,品牌网站建设,成都营销网站建设,外贸网站建设,汾西网站建设费用合理。

先奉上效果图

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

html代码

 
 
   
    仿手机微信支付输入密码界面效果 
     
     
     
   
   
     
    去支付 
     
     
       
       
         
           
             
               
               
              请输入支付密码 
            
                              测试商品
                ¥88.88
              
                                                    
                              
                              
  •                   1                  2                  3                
  •                 
  •                   4                  5                  6                
  •                 
  •                   7                  8                  9                
  •                 
  •                   清空                   0                   删除                
  •                                                        

    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 h5 { 
            height: 0.5rem; 
            line-height: 0.5rem; 
            margin: 0; 
            text-align: center; 
          } 
          .paymentArea-Keyboard h5 img { 
            width: 0.93rem; 
            height: 0.32rem; 
            margin: 0 auto; 
          } 
          .paymentArea-Keyboard h5: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 
            } 
          }

    js

    //定义根目录字体大小,通过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"); 
          // 获取  元素,用于关闭弹窗 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"; 
          } 
          // 点击  (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 h5"); 
          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 h5").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 h5").style.display = "block"; 
            document.querySelector(".paymentArea-Keyboard ul").style.display = "block"; 
          })

    关于“JS如何实现仿微信支付弹窗功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    分享名称:JS如何实现仿微信支付弹窗功能
    URL地址:http://ybzwz.com/article/pjedoc.html