移動支付已經(jīng)成為大家日常生活中一種重要的支付手段，市面上也有越來越多的手機應用支持各種第三方的移動支付。當然，有的應用甚至要做屬于自己的支付，那么這個時候我們沒辦法調(diào)用第三方的支付界面了。怎么辦呢，只能自己做咯。但是往往上面又常常會催的緊，導致自己心情不好就不想做或者對如何實現(xiàn)沒有頭緒。
經(jīng)過在下的不懈努力（其實是因為我笨），做了一套簡單的手機支付界面，分享給大家。做的太丑不要嫌棄，其實我自己也經(jīng)常吐槽自己的CSS水平。
先上效果圖：
4e310e7dd6c0c15e6ddb9bbf78d638d9.gif
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<title>模擬數(shù)字鍵盤</title>
<style type="text/css">
table#number_input {
background-color: white;
position: fixed;
top: 80px;
width: 70%;
left: 15%;
text-align: center;
}
table#number_input td {
border: 1px solid gainsboro;
border-right: 0;
width: 10%;
height: 40px;
}
table#number_input td:last-child {
border-right: 1px solid gainsboro;
}
table#keyboard {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
width: 100%;
height: 160px;
background-color: white;
}
table#keyboard td {
border: 1px solid gainsboro;
border-right: 0;
border-bottom: 0;
width: 33%;
}
table#keyboard td:enabled {
color: red;
}
table#keyboard td:last-child {
border-right: 1px solid gainsboro;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">模擬數(shù)字鍵盤</h1>
</header>
<div class="mui-content">
<table id="number_input" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
</tr>
</tbody>
</table>
<table id="keyboard" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="keyboard-number">1</td>
<td class="keyboard-number">2</td>
<td class="keyboard-number">3</td>
</tr>
<tr>
<td class="keyboard-number">4</td>
<td class="keyboard-number">5</td>
<td class="keyboard-number">6</td>
</tr>
<tr>
<td class="keyboard-number">7</td>
<td class="keyboard-number">8</td>
<td class="keyboard-number">9</td>
</tr>
<tr>
<td class="keboard-action" data-action="reset">reset</td>
<td class="keyboard-number">0</td>
<td class="keboard-action" data-action="cancel">cancel</td>
</tr>
</tbody>
</table>
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.ready(function() {
// 數(shù)字索引
var activeIndex = 0;
// 密碼結果
var resultValue = "";
// 所有輸入框
var inputList = mui(".input-item");
// 所有數(shù)字鍵
var numberList = mui(".keyboard-number");
// 數(shù)字鍵盤點擊事件
mui("#keyboard").on("tap", ".keyboard-number", function() {
if(activeIndex == 6) {
return;
}
var num = this.innerText;
addNumber(num);
});
mui("#keyboard").on("tap", ".keboard-action", function() {
var value = this.getAttribute("data-action");
switch(value) {
case "cancel":
if(activeIndex == 0) {
return;
}
cancelNumber();
break;
case "reset":
resetInput();
break;
default:
break;
}
});
// 添加數(shù)字
function addNumber(num) {
inputList[activeIndex].innerText = "*";
resultValue += num;
activeIndex++;
// 檢測密碼長度
if(activeIndex == 6) {
// 假定123456是正確密碼
if(resultValue != "123456") {
wrongPassword();
} else {
mui.toast("密碼正確，然后跳轉到下一個頁面");
}
}
}
// 撤銷數(shù)字
function cancelNumber() {
activeIndex--;
inputList[activeIndex].innerText = "";
resultValue = resultValue.substring(0, resultValue.length - 1);
}
// 密碼框置空
function resetInput() {
activeIndex = 0;
resultValue = "";
mui(".input-item").each(function(index, element) {
element.innerText = "";
});
}
// 密碼錯誤
function wrongPassword() {
mui.confirm("密碼錯誤", "驗證結果", ["再來一次", "密碼忘了"], function(event) {
var index = event.index;
if(index == 0) {
mui.toast("請再次輸入");
} else {
mui.toast("下一步跳轉到忘記密碼的頁面");
}
resetInput();
});
}
});
</script>
</body>
</html>
一、制作界面
界面做的比較簡單，由兩個table組成。上面是密碼框，下面是鍵盤部分。鍵盤部分分為數(shù)字鍵以及功能鍵，這里只有兩個功能，“重置”和“撤銷”。
二、功能實現(xiàn)
1、我們需要一個變量，來存儲密碼框索引（以及密碼已有的長度）；
2、我們需要一個字符串來存儲實際的密碼的值，因為界面上展示的是“*”，并不會顯式地展示數(shù)字；
3、給所有數(shù)字鍵添加點擊事件，進行密碼的輸入操作，當最后一位密碼輸入后，我們檢測密碼的值；
4、如果密碼正確，則進入支付成功頁面（實際業(yè)務中自己決定哦），不然就提示用戶密碼錯誤；
5、關于密碼錯誤，可以讓用戶選擇重新輸入，或者用戶忘記密碼的話讓他去找回密碼（同樣，實際業(yè)務自己決定）；
6、給功能鍵添加事件，重置鍵顧名思義，就是重置所有數(shù)據(jù)，撤銷鍵就是將已經(jīng)輸入的密碼最后一位清楚掉；
7、對于一些細節(jié)的判定之類的，大家自己看源碼就好了。
本文轉自http://ask.dcloud.net.cn/article/796
剛剛新建了一個分享交流群，366270001，期待你們的加入。
