移动支付已经成为大家日常生活中一种重要的支付手段，市面上也有越来越多的手机应用支持各种第三方的移动支付。当然，有的应用甚至要做属于自己的支付，那么这个时候我们没办法调用第三方的支付界面了。怎么办呢，只能自己做咯。但是往往上面又常常会催的紧，导致自己心情不好就不想做或者对如何实现没有头绪。
经过在下的不懈努力（其实是因为我笨），做了一套简单的手机支付界面，分享给大家。做的太丑不要嫌弃，其实我自己也经常吐槽自己的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>模拟数字键盘</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">模拟数字键盘</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() {
// 数字索引
var activeIndex = 0;
// 密码结果
var resultValue = "";
// 所有输入框
var inputList = mui(".input-item");
// 所有数字键
var numberList = mui(".keyboard-number");
// 数字键盘点击事件
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;
}
});
// 添加数字
function addNumber(num) {
inputList[activeIndex].innerText = "*";
resultValue += num;
activeIndex++;
// 检测密码长度
if(activeIndex == 6) {
// 假定123456是正确密码
if(resultValue != "123456") {
wrongPassword();
} else {
mui.toast("密码正确，然后跳转到下一个页面");
}
}
}
// 撤销数字
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组成。上面是密码框，下面是键盘部分。键盘部分分为数字键以及功能键，这里只有两个功能，“重置”和“撤销”。
二、功能实现
1、我们需要一个变量，来存储密码框索引（以及密码已有的长度）；
2、我们需要一个字符串来存储实际的密码的值，因为界面上展示的是“*”，并不会显式地展示数字；
3、给所有数字键添加点击事件，进行密码的输入操作，当最后一位密码输入后，我们检测密码的值；
4、如果密码正确，则进入支付成功页面（实际业务中自己决定哦），不然就提示用户密码错误；
5、关于密码错误，可以让用户选择重新输入，或者用户忘记密码的话让他去找回密码（同样，实际业务自己决定）；
6、给功能键添加事件，重置键顾名思义，就是重置所有数据，撤销键就是将已经输入的密码最后一位清楚掉；
7、对于一些细节的判定之类的，大家自己看源码就好了。
本文转自http://ask.dcloud.net.cn/article/796
刚刚新建了一个分享交流群，366270001，期待你们的加入。
