如何利用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>   <img src="images/xx_03.jpg" class="close" /> <img src="images/jftc_03.png" class="useimg"> 请输入支付密码 测试商品 ￥88.88 <ul class="paymentarea-entry-row"></ul> <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> </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"); // 获取 元素，用于关闭弹窗 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 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仿qq中对联系人向左滑动和滑出删除按钮的操作
利用js实现随页面滚动显示/隐藏窗口固定位置元素
以上就是如何利用js实现仿微信支付弹窗功能的详细内容。

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

VIP推荐