一个支付页面DEMO附截图


Posted in Javascript onJuly 22, 2014

一个支付页面DEMO附截图
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="http://yanshi.bj8dream.com/static/xiaoniren/css/common.css" rel="external nofollow" /> 
<base target="_self" /> 
<title>思瑜科技在线充值</title> 
<script type="text/javascript" src="http://yanshi.bj8dream.com/static/xiaoniren/js/jQuery_v172_min.js"></script> 
<style type="text/css"> 
/* Bank Select */ 
.ui-list-icons li { float:left; margin:0px 10px 25px 0px; width:218px; padding-right:10px; display:inline; } 
.ui-list-icons li input { vertical-align:middle; } 
.ui-list-icons li .icon-box { cursor:pointer; width:190px; background:#FFF; line-height:36px; border:1px solid #DDD; vertical-align:middle; position:relative; display:inline-block; zoom:1; } 
.ui-list-icons li .icon-box.hover, .ui-list-icons li .icon-box.current { border:1px solid #FA3; } 
.ui-list-icons li .icon-box-sparkling { position:absolute; top:-18px; left:0px; height:14px; line-height:14px; } 
.ui-list-icons li .icon { float:left; width:126px; padding:0px; height:36px; display:block; line-height:30px; color:#07f; font-weight:bold; white-space:nowrap; overflow:hidden; position:relative; z-index:1; } 
.ui-list-icons li .bank-name { position:absolute; left:5px; z-index:0; height:36px; width:121px; overflow:hidden; } 
/* Bank Background */ 
.ui-list-icons li .ABC, .ui-list-icons li .ICBC, .ui-list-icons li .CCB, .ui-list-icons li .PSBC, 
.ui-list-icons li .BOC, .ui-list-icons li .CMB, .ui-list-icons li .COMM, .ui-list-icons li .SPDB, 
.ui-list-icons li .CEB { background:#FFF url(images/ICBC_bank.gif) no-repeat 5px center; } 
/* Bank Submit */ 
.paybok { padding:0px 0px 0px 20px; } 
.paybok .csbtx { border-radius:3px; color:#FFF; font-weight:bold; } 
</style> 
<script type="text/javascript"> 
$(function(){ 
//Bank Hover 
$('.ui-list-icons > li').hover(function(){ 
$(this).children('.icon-box').addClass('hover'); 
}, function(){ 
$(this).children('.icon-box').removeClass('hover'); 
}); 

//Bank Click 
$('.ui-list-icons > li').click(function(){ 
for ( var i=0; i<$('.ui-list-icons > li').length; i++ ){ 
$('.ui-list-icons > li').eq(i).children('.icon-box').removeClass('current'); 
} 
$(this).children('.icon-box').addClass('current'); 
}); 
}) 
</script> 
</head> 
<body> 
<div class="paying"> 
<p class="paytit"> 
<strong>您好,fx!系统代理商</strong> 
<span>欢迎您登录票务管理系统</span> 
<em>账户余额:¥81291.00元</em> 
<i>已消费:¥64521元</i> 
</p> 
<form action="/huayi_test/order/charge.php" method="post" class="validator" name="f" onsubmit="return chongzhi();" > 
<div class="payamont"> 
<input type="text" id="money" name="money" value="" /> 
<span>元 (输入充值金额,不支持小数,最低 500元)</span> 
</div> 
<div class="clr"></div> 
<ul class="ui-list-icons clrfix"> 
<li> 
<input type="radio" name="bank" id="ABC" value="" checked="checked"> 
<label class="icon-box current" for="ABC"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon ABC" title="中国农业银行"></span> 
<span class="bank-name">中国农业银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="ICBC" value=""> 
<label class="icon-box" for="ICBC"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon ICBC" title="中国工商银行"></span> 
<span class="bank-name">中国工商银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="CCB" value=""> 
<label class="icon-box" for="CCB"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon CCB" title="中国建设银行"></span> 
<span class="bank-name">中国建设银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="CCB" value=""> 
<label class="icon-box" for="CCB"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon CCB" title="中国建设银行"></span> 
<span class="bank-name">中国建设银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="PSBC" value=""> 
<label class="icon-box" for="PSBC"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon PSBC" title="中国邮政储蓄银行"></span> 
<span class="bank-name">中国邮政储蓄银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="BOC" value=""> 
<label class="icon-box" for="BOC"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon BOC" title="中国银行"></span> 
<span class="bank-name">中国银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="CMB" value=""> 
<label class="icon-box" for="CMB"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon CMB" title="招商银行"></span> 
<span class="bank-name">招商银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="COMM" value=""> 
<label class="icon-box" for="COMM"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon COMM" title="交通银行"></span> 
<span class="bank-name">交通银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="SPDB" value=""> 
<label class="icon-box" for="SPDB"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon SPDB" title="浦发银行"></span> 
<span class="bank-name">浦发银行</span> 
</label> 
</li> 
<li> 
<input type="radio" name="bank" id="CEB" value=""> 
<label class="icon-box" for="CEB"> 
<span class="icon-box-sparkling" bbd="false"> </span> 
<span class="false icon CEB" title="中国光大银行"></span> 
<span class="bank-name">中国光大银行</span> 
</label> 
</li> 
</ul> 
<div class="paybok"><input class="csbtx" type="button" value="确认充值" onclick="this.form.submit();" /></div> 
</form> 
</div> 

</body> 
</html>
Javascript 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
一个仿糯米弹框效果demo
Jul 22 #Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 #Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 #Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 #Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 #Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 #Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 #Javascript
You might like
PHP 闭包详解及实例代码
2016/09/28 PHP
Javascript实现的分页函数
2007/02/07 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python Flask-web表单使用详解
2017/11/18 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
教师现实表现材料
2014/02/14 职场文书
自动一体化专业求职信
2014/03/15 职场文书
创先争优宣传标语
2014/10/08 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python