首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 25, 2018

先奉上效果图

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> 
    <!-- 弹窗 --> 
    <div id="myModal" class="modal"> 
      <!-- 弹窗内容 --> 
      <div class="modal-content"> 
        <div class="paymentArea"> 
          <div class="paymentArea-Entry"> 
            <div 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> 
            </div> 
            <div class="paymentArea-Entry-Content"> 
              <div class="pay-name">测试商品</div> 
              <div class="pay-price">￥88.88</div> 
            </div> 
            <ul class="paymentArea-Entry-Row"></ul> 
          </div> 
          <div 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> 
          </div> 
        </div> 
      </div> 
    </div> 
  </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 
        } 
      }

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"); 
      // 获取 <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"; 
      })

总结

以上所述是小编给大家介绍的JS实现仿微信支付弹窗功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

Crow_Block

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
js实现京东轮播图效果
Jun 30 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vue.js 实现输入框动态添加功能
Jun 25 #Javascript
vue-router重定向不刷新问题的解决
Jun 25 #Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 #Javascript
详解React之父子组件传递和其它一些要点
Jun 25 #Javascript
Vue EventBus自定义组件事件传递
Jun 25 #Javascript
一个Vue页面的内存泄露分析详解
Jun 25 #Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 #Javascript
计算器(5) 底部导航(1) 图像处理(1) 异步回调(1) 五子棋(12) format(1) PyTorch(1) 井字棋(1) 人工智能(2) 对齐打印(1)
You might like
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
JavaScript 常用函数
2009/12/30 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
Javascript生成全局唯一标识符（GUID,UUID）的方法
2016/02/27 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python从ftp下载数据保存实例
2013/11/20 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python图形用户接口实例详解
2019/12/16 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
python实现简单学生信息管理系统
2020/04/09 Python
golang/python实现归并排序实例代码
2020/08/30 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
微信营销策划方案
2014/02/24 职场文书
驻村工作先进事迹
2014/08/14 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书