湛江网站建设方案报价,顺德网站建设7starry,甘肃省住房和城乡建设部网站官网,怎么找电商平台合作H5页面随机数字键盘支付页面 有个H5支付的业务需要随机数字的键盘 参考了下文#xff1a;https://blog.csdn.net/Mr_Smile2014/article/details/52473351 做了一些小修改#xff1a; 在原有的基础上#xff0c;增加了一些按键反馈的效果。 每个按键加上边框。 最终效果… H5页面随机数字键盘支付页面 有个H5支付的业务需要随机数字的键盘 参考了下文https://blog.csdn.net/Mr_Smile2014/article/details/52473351 做了一些小修改 在原有的基础上增加了一些按键反馈的效果。 每个按键加上边框。 最终效果 下面是所有代码 1.HTML页面JS !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadmeta nameviewportcontentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0 /meta http-equivCache-Control CONTENTprivate,must-revalidatelink href../media/css/bootstrap.min.css relstylesheet typetext/css/!-- 引入js脚本文件 begin --!--[if lt IE 9]script srchttp://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js/scriptscript srchttp://cdn.bootcss.com/respond.js/1.4.2/respond.min.js/script![endif]--titleH5付款/titlestyle typetext/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[typepassword],input[typetext]{ 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/headbodydiv styleheight: 20px;/divform action../pay methodpost idfromdiv classcontentdivlabel stylefont-size: 20px;padding-left: 12px; 账户/labelinput typetext idloginName placeholder //div!--divlabel stylefont-size: 20px;padding-left: 12px; 密码/labelinput typepassword idpwd placeholder //div--label stylefont-size: 20px;padding-left: 12px; 支付密码/labeldiv idtradePwd classinput-out pass-label styleborder-bottom: 1px solid #ddd;padding-left: 12px; random2321321321 path../ label idpin stylecolor: #8C8C8C;height: 20px;/label/div/divdiv classbtn-outbutton typebutton classbtn btn-default ontouchstartcheck(); idpay支付/button/div/formdiv classbottom idbottom-out!--img srcc:url value/images/phone.png/ /--!--span客服电话4000-xxx-xxx/span--/div!-- jianpan--div classkeyboard styledisplay:none; idkeyboardtable classtable-bordered idkey_table/table/div/body
script src../media/js/jquery-1.10.1.min.js typetext/javascript/script
script src../media/js/bootstrap.min.js typetext/javascript/script
script typetext/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 typehidden namepkey idpkey /);}//$(#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 classtable-bordered stylewidth:33%; key data[i] ontouchstartontouchreturn(this); ontouchendreturn ontouch(this);img src ../h5Pay/getKey?key data[i] rangdom rangdom styleheight:20px; idkey_img//td/trtr;} else if (i 7) {content content td classtable-bordered stylewidth:33%; key data[i] ontouchstartontouchreturn(this); ontouchendreturn ontouch(this);img src ../h5Pay/getKey?key data[i] rangdom rangdom styleheight:20px; idkey_img//td;} else if (i 8) {content content td classtable-bordered stylewidth:33%; ontouchstartontouchreturn(this); ontouchendreturn deleteOne(this);img src ../media/image/keys/delete.png styleheight:20px; idkey_img//td /trtr;} else if (i 11) {content content td classtable-bordered stylewidth:33%; key data[i - 1] ontouchstartontouchreturn(this); ontouchendreturn ontouch(this);img src ../h5Pay/getKey?key data[i - 1] rangdom rangdom styleheight:20px; idkey_img//td;} else {content content td classtable-bordered stylewidth:33%; ontouchstartontouchreturn(this); ontouchendreturn _ok(this);img src ../media/image/keys/ok.png styleheight:20px; idkey_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||pinundefined){boolfalse;alert(请输入支付密码);return false;}else{var keyspin.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 ListString rundomKeys;// 随机Keysprivate MapString, String valueKeyMaps;// 密文和明文映射private MapString, String imgKeyMaps;// 密文和明文映射public PwdKeyDto() {super();// TODO Auto-generated constructor stub}public ListString getRundomKeys() {return rundomKeys;}public void setRundomKeys(ListString rundomKeys) {this.rundomKeys rundomKeys;}public PwdKeyDto(ListString rundomKeys, MapString, String valueKeyMaps,MapString, String imgKeyMaps) {super();this.rundomKeys rundomKeys;this.valueKeyMaps valueKeyMaps;this.imgKeyMaps imgKeyMaps;}public MapString, String getValueKeyMaps() {return valueKeyMaps;}public void setValueKeyMaps(MapString, String valueKeyMaps) {this.valueKeyMaps valueKeyMaps;}public MapString, String getImgKeyMaps() {return imgKeyMaps;}public void setImgKeyMaps(MapString, 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)ResponseBodyRequestMapping(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();}MapString, 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* */ResponseBodyRequestMapping(value /pay, method RequestMethod.POST)public String pay(String pin,String random, HttpServletRequest request) {try {logger.info([支付(pay)][params:pin pin ,randomrandom]);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 密码键盘已失效请重新输入密码;}MapString, 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 MapString, String imagesValueMap;/*** * Description: 获取密码键盘映射关系* param imagesValueMap* return* */static {imagesValueMap new HashMapString, 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() {ListString rundomKeys new ArrayListString();// 随机key映射MapString, String valueKeys new HashMapString, String();// 密文和明文映射MapString, String imgKeyMaps new HashMapString, String();// 密文和图片映射ListString keys new ArrayListString();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)) {MapString, String valuekeys (MapString, 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;}
} 最后还有扣下来的按键图片。 posted on 2018-11-26 17:05 米德 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/mide0131/p/10021441.html
