首页
所有分类
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代码实例
Jun 15 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
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
PHILIPS(3) Panasonic(1) ICF-SW7600GR(1) D1835(1) L4X25T(1) 德生9700DX(1) 德劲1103(3) 飞利浦(2) 德生PL330(2) ICF-SW55(1)
You might like
php之字符串变相相减的代码
2007/03/19 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python简直是万能的，这5大主要用途你一定要知道！（推荐）
2019/04/03 Python
Python 自由定制表格的实现示例
2020/03/20 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
个人教师自我评价范文
2013/12/02 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
大班亲子运动会方案
2014/06/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
卡特教练观后感
2015/06/08 职场文书