分享一個簡單的仿微信支付彈窗（js版）

阿新 • • 發佈：2019-01-16

先奉上效果圖

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" />
	</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
				}
			}

//定義根目錄字型大小，通過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; 
                                       pwds = pwds.replace(/\s/g,""); //對pwds進行去空字元處理
                                                                        }  
									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版）

先奉上效果圖html程式碼<!DOCTYPE html> <html> <head> <title>仿手機微信支付輸入密碼介面效果</title> <meta charset="utf-8" /&g

Android 仿微信popuwindow彈窗，呼叫只需要一個方法，以及4.4系統popuwindow外部不響應解決辦法

對於popuwindow大家都熟悉，他給Dialog的區別就是外部可以點選消失，一些使用者提示、使用者指引基本上用的都是這個控制元件，我用這個控制元件實現了微信分享的下部彈窗，效果挺好，使用起來也比較流暢，佈局樣式，都可以根據自己的需求進行更改，很不錯的一個方法，希望能幫到大

微信小程式之微信支付C#後臺（統一下單）

#region 生成簽名 /// <summary> /// 獲取簽名資料 ///</summary> /// <param name="strParam"></param> /// <param name="key"></par

一個簡單Quartz微服務————良好擴充套件性（springcloud,叢集）

一、背景介紹專案早期為單體應用，近期因業務量上漲，架構逐漸轉為springcloud+分散式叢集。原先專案中的定時任務主要採用@Scheduled註解方式實現，並且因歷史原因，分佈散亂，管理不便。@Scheduled註解的定時任務無法直接應用於叢集環境，並且服務重啟

如何調通微信支付及微信發貨通知介面（Js API）

一個還算簡單的微信消息SDK（基於.Net Standard 2.0）

sch 入口技術分享 ret 公眾 func exec 實體 blank 　　雖然微信公眾號出現了好久，不過在SDK這件事情上感覺並沒有多少人把它當成一個有技術含量的事情來做，很多SDK做的事情就是一個代碼的堆疊，當然也可能寫的好的並沒有開源出來。所以在某個翻遍Githu

小程式自定義數字鍵盤|仿微信支付、支付寶支付密碼鍵盤

微信小程式自定義鍵盤外掛wcKeyboard|仿微信數字軟鍵盤|仿支付寶自定義數字鍵盤|小程式自定義模擬系統鍵盤前段時間有開發過一個html5仿支付寶、微信支付數字鍵盤，在某些情況下自定義數字鍵盤應用還是蠻多的，比如購物商城系統零錢付款 ,會員卡支付，恰好微信小程式沒有內部數字鍵盤元件，這樣輸入密

001、仿微信右上角彈出選單

一、效果圖二、程式碼 1、選單佈局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

分享一個PHP獲取微信JS-SDK配置的操作類

本來是使用easywechat的函式直接生成JS配置的，可是不知為何老是提示簽名是非法的，無奈只有自己寫一個操作類來獲取簽名了….. 但是不得不說easywechat是真的好用，特別是支付，簡直不能更簡單了，強行安利一波：https://www.easywechat.com/

分享一個可以提高微信公眾號文章閱讀率的小工具！公眾號運營者必備哦！

這個工具叫“閱讀紅包”。 “閱讀紅包”是個什麼東西？閱讀紅包可以理解為文章的彩蛋。也就是，當你的粉絲閱讀完了你群發的文章，在文章末尾驚喜的發現了一個“領取紅包”的連結，該粉絲點選連結，即可按設定的中獎概率獲得一個微信紅包。有什麼用處？ 1. 給自己的粉

Android 仿微信支付密碼輸入框

今天在專案中遇到一個類似微信支付的密碼輸入框的需求，具體的實現要求如下：因為這樣的一個控制元件主要實現的密碼輸入的功能，這大體上和Edittext相似，但不同於EditText的一點就是該控制元件需要顯示六個密碼框。對於控制元件在展示上不同的問題，毫無疑問，需要通過重

Android高仿微信/支付寶掃一掃（弱光檢測掃一掃自動放大功能）

if (rawResult != null) { // Don't log the barcode contents for security. long end = System.currentTimeMillis(); Log.d(T

教你一個簡單的微信怎麼刷票及微信如何刷票技巧「圖文教程」

一個小小的投票系統,首先建立四張資料庫的表,user使用者表,vms_vote投票表,vms_voteitem投票選項表,vms_ joinvote使用者投票表各個表字段如下各個介面如下主介面主要用到iframe<script>  functio

Android 仿微信/支付寶的密碼輸入框效果(一)

前言：最近專案中碰到了一個像支付寶跟微信一樣的輸入密碼自動驗證的一個需求，因為之前在外包待過，所以你懂的！！用過太多封裝好的控制元件了，都是略過，能實現功能就可以了，也都不管其實現過程，現在靜下心了，於是打算研究研究。先上一張類似需求的圖片：說明一

移動端H5 仿微信支付密碼

1、先上圖 2、CSS程式碼 <style> .pwd-box{ display: none; width:310px; height: 220px;

通過生成支付二維碼來實現微信支付的解決方案 - EasyWechat版（轉）

ppi ppk 一個 segment url out -s easy 記得上一篇我們講了在微信瀏覽器內實現微信支付的功能，它特別適合於一些基於微信公眾號的h5站點等，支付流程也相當流暢，但是... 還有一種情況，比如現在北哥兄弟連PC版，是生成了一個二維碼，這個二維碼

微信支付：手機系統自帶的瀏覽器，調用微信支付如何實現（非掃碼）

所有價格驗證返回調用 -i 是否為空支付申請 data- Q:翻看了微信支付的api沒發現支持h5調支付接口的情況（微信js除外），然後卻發現美團的支付成功調用了，這是怎麽實現的？ A: 使用微信H5支付即可。H5支付通過URL調起微信APP，

asp.net core 微信支付工具類（H5支付，掃碼支付，公眾號支付，app支付）之2-H5支付

IV app支付 tno 方式 quest ces sys net ota 　　上一篇說到微信掃碼支付，今天來分享下微信H5支付，適用場景為手機端非微信瀏覽器調用微信H5支付驚醒網站支付業務處理。申請開通微信H5支付工作不多做介紹，直接上代碼。　　首先是微信支付業務類（W

微信公眾號支付開發全過程（java版）

sdk 命令所有 data 權限 {} servle res ast 文章有不當之處，歡迎指正，如果喜歡微信閱讀，你也可以關註我的微信公眾號：好好學java，獲取優質學習資源。一、微信官方文檔微信支付開發流程（公眾號支付）首先我們到微信支付的官方文檔的開發步驟部分查

微信小程式-微信支付詳細介紹（Thinkphp後端程式碼）

流程如微信支付的文件，不再多說 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3 一一分析一下每一步我們具體要做什麼： 1、小程式內呼叫登入介面，獲取到使用者的o

分享一個簡單的仿微信支付彈窗（js版）

相關推薦