一个支付宝停车支付生活号前端页面
//index.html//自定义键盘月星停车 请输入车牌号
- 省
- 京
- 津
- 渝
- 沪
- 冀
- 晋
- 辽
- 吉
- 黑
- 苏
- 浙
- 皖
- 闽
- 赣
- 鲁
- 豫
- 鄂
- 湘
- 粤
- 琼
- 川
- 贵
- 云
- 陕
- 甘
- 青
- 蒙
- 桂
- 宁
- 新
- ABC
- 藏
- 使
- 领
- 警
- 学
- 港
- 澳
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 0
- Q
- W
- E
- R
- T
- Y
- U
- I
- O
- P
- A
- S
- D
- F
- G
- H
- J
- K
- L
- 返回
- Z
- X
- C
- V
- B
- N
- M
//index.js$(function(){ var num = 6;//需要输入的车牌数 //切换键盘 $('.changeContentBtn').click(function(){ if($(this).html()=='ABC'){ $('#textBox').show(); $('#provienceBox').hide(); }else{ $('#textBox').hide(); $('#provienceBox').show(); } }) //新能源点击事件 $('.xinnengyuan').click(function(){ num = 7; $(this).removeClass('xinnengyuan'); }) //获取当前车牌数字索引 function getIndex(){ var index = 0; $('.carLicenseMain ul li').each(function(){ var reg = new RegExp('active'); if(reg.test($(this).attr('class'))){ index = $(this).index(); } }) return index; } //自定义键盘处理函数 function keyboard(num,self){ var index = getIndex(); if(index<=num){ if(index == num){ $('.carLicenseMain ul li.active').html($(self).html()); }else{ $('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active'); } $('#textBox').show(); $('#provienceBox').hide(); } } //省份键盘点击事件 $('#provienceBox ul li:not(.other)').click(function(){ var self = this; keyboard(num,self); }) //文本键盘点击事件 $('#textBox ul li:not(.other)').click(function(){ var self = this; keyboard(num,self); }) //回退按钮点击事件 $('.deleteBtn').click(function(){ var index = getIndex(); if(index == num){ if($('.carLicenseMain ul li.active').html() != ''){ $('.carLicenseMain ul li.active').html(''); }else{ if(index == 7){ $('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan'); num = 6; } $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html(''); } }else if(index < num && index > 1){ $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html(''); }else if(index == 1){ $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('省'); } }) //提交按钮点击事件 $('#submitBtn').click(function(){// window.location.href = "payment.html"; layer.alert('您不是会员，请注册后再支付！', { icon: 6, yes: function() { window.location.href = "regist.html" } }); })}) 
//regist.html月星停车 姓名
车牌号
手机号
//regist.js$(function() { var regName = /[\u4e00-\u9fa5]/; //用户名 var regPhone = /0?(13|14|15|17|18)[0-9]{9}/; //手机号 var regCar1 = /^([冀豫云辽黑湘皖鲁苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼渝京津沪新京军空海北沈兰济南广成使领][a-zA-Z](([DF](?![a-zA-Z0-9]*[IO])[0-9]{4})|([0-9]{5}[DF])))|([冀豫云辽黑湘皖鲁苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼渝京津沪新京军空海北沈兰济南广成使领A-Z]{1}[a-zA-Z0-9]{5}[a-zA-Z0-9挂学警港澳]{1})$/; //常规汽车车牌 // var regCar2 = '/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{6}$/';//新能源汽车车牌 //alert function pop(value, msg) { if(value == '') { layer.alert(msg, { icon: 2 }); return false; } else { return true; } } //姓名验证 function checkName() { var value = $('#userName').val(); var msg = '您的姓名不能为空！'; if(pop(value, msg)) { if(regName.test(value)) { return true; } else { layer.alert('请输入中文姓名！', { icon: 7 }); return false; } } else { return false; }; } //车牌号验证 function checkCar() { var value = $('#carNum').val(); var msg = '您的车牌号不能为空！'; if(pop(value, msg)) { if(regCar1.test(value)) { return true; } else { layer.alert('请检查输入的车牌号！', { icon: 7 }); return false; } } else { return false; }; } //手机号验证 function checkPhone() { var value = $('#phone').val(); var msg = '您的手机号不能为空！'; if(pop(value, msg)) { if(regPhone.test(value)) { return true; } else { layer.alert('请检查输入的手机号！', { icon: 7 }); return false; } } else { return false; }; } //注册按钮点击事件 $('#registBtn').click(function() { if(checkName() && checkCar() && checkPhone()) { layer.load(2, { content: '注册中', // time: 3 * 1000, shade: 0.1, success: function(layero) { layero.find('.layui-layer-content').css({ 'padding-top': '40px', 'width': '50px', 'text-indent': '-8px' }); } }) setTimeout(function() { layer.closeAll('loading'); layer.alert('恭喜你，注册成功！', { icon: 6, yes: function() { window.location.href = "payment.html" } }); }, 5000); } })}) 
月星停车
- 沪
- A
- T
- X
- 1
- 2
- 3
总时长
5小时0分钟
应付金额
￥50
入场时间 2016-11-22 07:22:33
缴费时间 2016-11-22 17:22:33
入场图
积分抵扣
总积分：100000
抵扣时长：0小时
花费积分：0积分
抵扣规则：10积分抵扣1小时
支付宝支付
支付金额：￥7.00
合计: ￥7.00支付确认
车牌:沪AK47F
进场时间:2016-11-22 07:22:33
总时长:5小时0分钟
总金额:10元
支付信息
积分抵扣:4小时
支付宝缴费:2元
支付取消
//payment.js$(function() { //放弃按钮点击事件 $('#giveUpBtn').click(function() { layer.confirm('你确定放弃支付吗？', { btn: ['确定', '取消'], //按钮 }, function() { window.location.href = "index.html"; }); }) //积分抵扣点击事件 $('#openIcon').click(function() { if($(this).parent().height() > 75) { $(this).css({ 'transform': 'rotate(0deg)' }); $(this).parent().animate({ height: "75px", }, "slow"); } else { $(this).css({ 'transform': 'rotate(180deg)' }); $(this).parent().animate({ height: "181px", }, "slow"); } }) //加减时长按钮点击事件 var numCount = 0; //抵扣时长初始化数字 $('#reduceBtn').click(function() { if(numCount > 0) { $('#timeNum').html(--numCount); $('.integralNum').html(numCount * 10); //统计计算所需花费积分 } else { numCount = 0; $('#timeNum').html(numCount); $('.integralNum').html(numCount * 10); //统计计算所需花费积分 } }) $('#plusBtn').click(function() { $('#timeNum').html(++numCount); $('.integralNum').html(numCount * 10); //统计计算所需花费积分 }) //结算按钮点击事件 $('#goPayBtn').click(function() { $('.payConfirmBox').fadeIn(); }) //支付确认按钮点击事件 $('.cancleBtn').click(function() { $('.payConfirmBox').fadeOut(); }) $('.payBtn').click(function(){ layer.msg('支付成功！'); })})