H5頁面隨機數字鍵盤支付頁面

有個H5支付的業務需要隨機數字的鍵盤

參考了下文：https://blog.csdn.net/Mr_Smile2014/article/details/52473351

做了一些小修改：

　　在原有的基礎上，增加了一些按鍵反饋的效果。

　　每個按鍵加上邊框。

最終效果：

下面是所有代碼：

1.HTML頁面+JS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /><meta http-equiv="Cache-Control" CONTENT="private,must-revalidate"><link href="../media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><!-- 引入js腳本文件  begin --><!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><title>H5付款</title><style type="text/css">.input-out {padding-top: 14px;}.btn-out {margin:30px 10px;}.btn-out button {width: 100%;background: #5CACEE;border: #5CACEE;color: #fff;height: 50px;border-radius: 3px;font-size: 18px;font-family: "Microsoft Yahei", "??????", SimHei, Tahoma, Arial, Helvetica, STHeiti;}.keyboard {background: #fff;}.keyboard table {width:100%;text-align:center;}.keyboard table td {padding: 15px;}.keyboard table a,.keyboard table a:hover,.keyboard table a:focus {color: #333;text-decoration: none;}.input-out label {color:#D2D1D1;font-weight: normal;font-size: 16px;}.bottom {color:#888888;margin-bottom: 15px;text-align:center;margin-top:100px;}.bottom a {color:#888888;}.bottom img {vertical-align: middle;width: 18px;}
/*.inputText { font-size: 16px;border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192); border-bottom: 1px solid #ddd;padding-left: 12px; width:100%;font-weight: normal;padding-top: 20px;height: 50px;
}*/
input[type="password"],input[type="text"]{ font-size: 30px;border-left: medium none; border-right: medium none; border-top: medium none; /*border-bottom: 1px solid rgb(192,192,192);*/ border-bottom: 1px solid #ddd;padding-left: 12px; width:100%;font-weight: normal;padding-top: 10px;height: 40px;
}
</style></head><body><div style="height: 20px;"></div><form action="../pay" method="post" id="from"><div class="content"><div><label  style="font-size: 20px;padding-left: 12px; ">賬戶</label><input type="text" id="loginName"  placeholder="" /></div><!--<div><label  style="font-size: 20px;padding-left: 12px; ">密碼</label><input type="password"  id="pwd" placeholder="" /></div>--><label  style="font-size: 20px;padding-left: 12px; ">支付密碼</label><div id="tradePwd" class="input-out pass-label" style="border-bottom: 1px solid #ddd;padding-left: 12px;" random="2321321321" path="../" ><label id="pin" style="color: #8C8C8C;height: 20px;"></label></div></div><div class="btn-out"><button type="button" class="btn btn-default" ontouchstart="check();" id="pay">支付</button></div></form><div class="bottom" id="bottom-out"><!--<img src="<c:url value="/images/phone.png"/>" />--><!--<span>客服電話：4000-xxx-xxx</span>--></div><!-- jianpan--><div class="keyboard" style="display:none;" id="keyboard"><table class="table-bordered" id="key_table"></table></div></body>
<script src="../media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="../media/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function() {$("#pay").removeAttr("disabled");$("input").click(function() {hideKey();});$("button").click(function() {hideKey();});$(".pass-label").click(function() {var rangdom = $(this).attr("random");var path = $(this).attr("path");pwdkey(this, rangdom, path);});window.addEventListener("onorientationchange" in window ? "orientationchange": "resize", hengshuping, false);});//橫豎屏function hengshuping() {if (window.orientation == 180 || window.orientation == 0) {$("div#keyboard td").each(function() {$(this).css("padding", "15px");});}if (window.orientation == 90 || window.orientation == -90) {$("div#keyboard td").each(function() {$(this).css("padding", "8px");});}window.scrollTo(0, $(".pass-label").offset().top);}//加載密碼鍵盤function pwdkey(obj, rangdom, path) {$('.keyboard').addClass("navbar-fixed-bottom");$('.keyboard').css({"z-index" : "9999"});if (rangdom == null || rangdom == "") {alert("無法加載密碼鍵盤，請刷新后重試!");return false;}if ($("#pkey").val() == null || $("#pkey").val() == "undefined") {$(obj).html($(obj).html()+ '<input type="hidden" name="pkey" id="pkey" />');}//$("#pin").html("支付密碼");
            $("#pin").html("");setCssNomal();$("#pkey").val("");$.ajax({type : 'post',url : "../h5Pay/pkey",cache : false,async : false,data : {rangdom : rangdom},success : function(data) {if (data == null || data == "" || data == "undefined"|| data.length != 10) {alert("無法加載密碼鍵盤，請刷新后重試!");return false;} else {var key_table = $("#key_table");key_table.html("");var content = '<tr>';for (var i = 0; i < 12; i++) {if ((i + 1) % 3 == 0 && i != 0 && i <= 5) {content = content+ '<td class="table-bordered" style="width:33%;"  key="'+ data[i]+ '"ontouchstart="ontouchreturn(this);" ontouchend="return ontouch(this);"><img src="'+ '../h5Pay/getKey?key='+ data[i]+ '&rangdom='+ rangdom+ '" style="height:20px;" id="key_img"/></td></tr><tr>';} else if (i <= 7) {content = content+ '<td class="table-bordered" style="width:33%;" key="'+ data[i]+ '"ontouchstart="ontouchreturn(this);" ontouchend="return ontouch(this);"><img src="'+ '../h5Pay/getKey?key='+ data[i]+ '&rangdom='+ rangdom+ '" style="height:20px;" id="key_img"/></td>';} else if (i == 8) {content = content+ '<td class="table-bordered" style="width:33%;" ontouchstart="ontouchreturn(this);"  ontouchend="return deleteOne(this);"><img src="'+ '../media/image/keys/delete.png" style="height:20px;"  id="key_img"/></td>'+ '</tr><tr>';} else if (i < 11) {content = content+ '<td class="table-bordered" style="width:33%;" key="'+ data[i - 1]+ '" ontouchstart="ontouchreturn(this);" ontouchend="return ontouch(this);"><img src="'+ '../h5Pay/getKey?key='+ data[i - 1]+ '&rangdom='+ rangdom+ '" style="height:20px;" id="key_img"/></td>';} else {content = content+ '<td class="table-bordered" style="width:33%;" ontouchstart="ontouchreturn(this);" ontouchend="return _ok(this);"><img src="'+ '../media/image/keys/ok.png" style="height:20px;" id="key_img"/></td>'+ '</tr>';}}key_table.html(content);setTimeout(function() {$("#keyboard").show();}, 600);hengshuping();}},error : function() {alert("無法加載鍵盤，請刷新后重試!");}});}function ontouchreturn(obj) {$(obj).attr("bgcolor","#c5c5c5");}//數字按鈕映射inputfunction ontouch(obj) {$(obj).removeAttr("bgcolor");var pkey = $("#pkey").val();var key = $(obj).attr("key");if (pkey == "") {$("#pin").html("");}var content = $("#pin").html();if (content != "" && content.length >= 6) {return false;}if (pkey != "") {key = "," + key;}pkey = pkey + key;$("#pkey").val(pkey);$("#pin").append("●");setCssKey();}//刪除按鈕function deleteOne(obj) {$(obj).removeAttr("bgcolor");var pkey = $("#pkey").val() + "";if (pkey == "") {return false;}var local = pkey.lastIndexOf(",");if (local == -1) {$("#pkey").val("");$("#pin").html("");//$("#pin").html("支付密碼");
                setCssNomal();} else {pkey = pkey.substring(0, local - 1);var content = $("#pin").html();content = content.substring(0, content.length - 1);$("#pkey").val(pkey);$("#pin").html(content);}}//確認按鈕function _ok(obj) {$(obj).removeAttr("bgcolor");$("#key_table").html("");$("#keyboard").hide();}function showkey() {$("#keyboard").show();}function hideKey() {$("#key_table").html("");$("#keyboard").hide();}function setCssKey() {$("#pin").css({"font-size" : "18px","color" : "#030303","font-weight" : "normal","letter-spacing" : "1px"});}function setCssNomal() {$("#pin").css({"font-size" : "16px","color" : "#8C8C8C","font-weight" : "normal"});}//支付按鈕function check(){hideKey();var pin="";pin=$("#pkey").val();if(pin==""||pin==undefined){bool=false;alert("請輸入支付密碼");return false;}else{var keys=pin.split(",");if(keys.length!=6){alert("請輸入6位支付密碼");return false;}}$.ajax({type : 'post',url : "../h5Pay/pay",data : {random:"2321321321",pin:pin},cache : false,success : function(data) { if(data.success){alert(data.message);}else{}},error : function(){alert("系統異常，請重試！");}});}</script></html>

2.密碼鍵盤的MODEL類

import java.io.Serializable;
import java.util.List;
import java.util.Map;public class PwdKeyDto implements Serializable{private static final long serialVersionUID = 1L;private List<String> rundomKeys;// 隨機Keysprivate Map<String, String> valueKeyMaps;// 密文和明文映射private Map<String, String> imgKeyMaps;// 密文和明文映射public PwdKeyDto() {super();// TODO Auto-generated constructor stub
    }public List<String> getRundomKeys() {return rundomKeys;}public void setRundomKeys(List<String> rundomKeys) {this.rundomKeys = rundomKeys;}public PwdKeyDto(List<String> rundomKeys, Map<String, String> valueKeyMaps,Map<String, String> imgKeyMaps) {super();this.rundomKeys = rundomKeys;this.valueKeyMaps = valueKeyMaps;this.imgKeyMaps = imgKeyMaps;}public Map<String, String> getValueKeyMaps() {return valueKeyMaps;}public void setValueKeyMaps(Map<String, String> valueKeyMaps) {this.valueKeyMaps = valueKeyMaps;}public Map<String, String> getImgKeyMaps() {return imgKeyMaps;}public void setImgKeyMaps(Map<String, String> imgKeyMaps) {this.imgKeyMaps = imgKeyMaps;}}

3.后臺Action

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.sanwing.spi.model.PwdKeyDto;
import com.sanwing.spi.utils.PwdKeyUtils;@Controller
@RequestMapping("/h5Pay")
public class H5Pay {private static final Logger logger = Logger.getLogger(H5Pay.class);@RequestMapping("/jumpH5Pay")public String jumpH5Pay(HttpServletRequest request,HttpServletResponse response){    return "/h5Pay";}/*** * @Description: 獲取密碼鍵盤* @param request* @param rangdom 隨機字符串* @return* */@SuppressWarnings("unchecked")@ResponseBody@RequestMapping(value = "/pkey", method = RequestMethod.POST)public Object digitkeyboard(HttpServletRequest request, String rangdom) {try {if (isBlank(rangdom)) {return "";}PwdKeyDto pwdkey = PwdKeyUtils.digitkeyboard();HttpSession session = request.getSession();session.setAttribute("pwdkey_" + rangdom, pwdkey);/*redisUtil.set("pwdkey_" + rangdom, pwdkey,redisUtil.getDigitkeyimeOut());*/return pwdkey.getRundomKeys();} catch (Exception e) {logger.error("[獲取密碼鍵盤digitkeyboard][error:{}",e);}return "";}/*** 獲取key圖片* * @throws Exception*/@RequestMapping(value = "/getKey", method = RequestMethod.GET)public void getKey(String key, String rangdom, HttpServletRequest request,HttpServletResponse response) throws Exception {HttpSession session = request.getSession();PwdKeyDto pwdkey = (PwdKeyDto) session.getAttribute("pwdkey_" + rangdom);if (pwdkey == null || pwdkey.getImgKeyMaps() == null) {logger.error("獲取圖片[getKey]:未獲取到對應的鍵盤的映射關系");throw new Exception();}Map<String, String> imagekeys = pwdkey.getImgKeyMaps();String path = imagekeys.get(key);String rootPath = request.getSession().getServletContext().getRealPath("/");path = rootPath + path;if (path != null && path.length() != 0) {try {InputStream fis = new FileInputStream(new File(path));BufferedInputStream bis = new BufferedInputStream(fis);OutputStream fos = response.getOutputStream();BufferedOutputStream bos = new BufferedOutputStream(fos);String fileName = "image.";String[] strs = path.split("\\.");fileName = fileName + strs[strs.length - 1];setFileDownloadHeader(request, response, fileName);int byteRead = 0;byte[] buffer = new byte[8192];while ((byteRead = bis.read(buffer, 0, 8192)) != -1) {bos.write(buffer, 0, byteRead);}bos.flush();fis.close();bis.close();fos.close();bos.close();} catch (Exception e) {logger.error("獲取圖片[path:" + path + "])失敗：" + e.toString(), e);}}}/*** * @Description: 支付* @param pin 交易密碼密文* @param random 隨機碼* @return* */@ResponseBody@RequestMapping(value = "/pay", method = RequestMethod.POST)public String pay(String pin,String random, HttpServletRequest request) {try {logger.info("[支付(pay)][params:pin=" + pin + ",random="+random+"]");if (!isBlank(pin)) {StringBuffer sb = new StringBuffer("");//PwdKeyDto pwdkey = (PwdKeyDto) redisUtil.get("pwdkey_" + random);HttpSession session = request.getSession();PwdKeyDto pwdkey = (PwdKeyDto) session.getAttribute("pwdkey_" + random);if (pwdkey == null || pwdkey.getValueKeyMaps() == null) {return "密碼鍵盤已失效，請重新輸入密碼";}Map<String, String> valuekeys = pwdkey.getValueKeyMaps();String[] pins = pin.split(",");if (pins.length != 6) {return "交易密碼位數不對";}for (String pinKey : pins) {String val = valuekeys.get(pinKey);if (isBlank(val)) {return "密碼鍵盤已失效，請重新輸入密碼";}sb.append(val);}//sb.toString()就是明文交易密碼
                System.out.println(sb.toString());}return "成功";} catch (Exception e) {logger.error("[支付（pay）][error:{}]",e);return "支付異常，請重試！";}}public static void setFileDownloadHeader(HttpServletRequest request,HttpServletResponse response, String fileName) {try {String encodedfileName = null;String agent = request.getHeader("USER-AGENT");if(null != agent && -1 != agent.indexOf("MSIE")){//IEencodedfileName = java.net.URLEncoder.encode(fileName,"UTF-8");}else if(null != agent && -1 != agent.indexOf("Mozilla")){encodedfileName = new String (fileName.getBytes("UTF-8"),"iso-8859-1");}else{encodedfileName = java.net.URLEncoder.encode(fileName,"UTF-8");}response.setHeader("Content-Disposition", "attachment; filename=\"" + encodedfileName + "\"");} catch (UnsupportedEncodingException e) {e.printStackTrace();}}public static boolean isBlank(final CharSequence cs) {int strLen;if (cs == null || (strLen = cs.length()) == 0) {return true;}for (int i = 0; i < strLen; i++) {if (Character.isWhitespace(cs.charAt(i)) == false) {return false;}}return true;}
}

4.密碼鍵盤工具類

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;import javax.servlet.http.HttpServletRequest;import com.sanwing.spi.model.PwdKeyDto;public class PwdKeyUtils {private final static Map<String, String> imagesValueMap;/*** * @Description: 獲取密碼鍵盤映射關系* @param imagesValueMap* @return* */static {imagesValueMap = new HashMap<String, String>();imagesValueMap.put("0","/media/image/keys/0.png");imagesValueMap.put("1","/media/image/keys/1.png");imagesValueMap.put("2","/media/image/keys/2.png");imagesValueMap.put("3","/media/image/keys/3.png");imagesValueMap.put("4","/media/image/keys/4.png");imagesValueMap.put("5","/media/image/keys/5.png");imagesValueMap.put("6","/media/image/keys/6.png");imagesValueMap.put("7","/media/image/keys/7.png");imagesValueMap.put("8","/media/image/keys/8.png");imagesValueMap.put("9","/media/image/keys/9.png");}public static PwdKeyDto digitkeyboard() {List<String> rundomKeys = new ArrayList<String>();// 隨機key映射Map<String, String> valueKeys = new HashMap<String, String>();// 密文和明文映射Map<String, String> imgKeyMaps = new HashMap<String, String>();// 密文和圖片映射List<String> keys = new ArrayList<String>();for (int i = 0; i < 10; i++) {keys.add(i + "");}for (int i = 0; i < 10; i++) {Random r = new Random();int index = r.nextInt(keys.size());String key = keys.get(index);keys.remove(index);String randomkey = randomKey(24);rundomKeys.add(randomkey);valueKeys.put(randomkey, key);imgKeyMaps.put(randomkey, imagesValueMap.get(key));}PwdKeyDto dto = new PwdKeyDto(rundomKeys, valueKeys, imgKeyMaps);return dto;}/*** * @Description:獲取動態key* @param num*            key位數* @return* */public static String randomKey(int num) {StringBuffer sb = new StringBuffer("");char[] chars = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A','B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M','N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y','Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k','l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w','x', 'y', 'z' };for (int i = 0; i < num; i++) {int id = (int) Math.ceil(Math.random() * 60);sb.append(chars[id]);}return sb.toString();}/*** * @Description:解密pin* @param request* @param pin* @return* */public static String decryptPinData(HttpServletRequest request,String ciphertextpin) throws Exception {if (!isBlank(ciphertextpin)) {Map<String, String> valuekeys = (Map<String, String>) request.getSession().getAttribute("valuekeys");if (valuekeys == null || valuekeys.size() != 10) {throw new Exception();}String[] ciphertextpins = ciphertextpin.split(",");StringBuffer sb = new StringBuffer("");for (String ctpin : ciphertextpins) {sb.append(valuekeys.get(ctpin));}}return null;}public static boolean isBlank(final CharSequence cs) {int strLen;if (cs == null || (strLen = cs.length()) == 0) {return true;}for (int i = 0; i < strLen; i++) {if (Character.isWhitespace(cs.charAt(i)) == false) {return false;}}return true;}
}