一个支付页面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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js浮动图片的动态效果
Jul 10 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
vue 注册组件的使用详解
May 05 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
一个仿糯米弹框效果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 MYSQL 数据备份类
2009/06/19 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python实现滑雪者小游戏
2020/02/22 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
学校元旦晚会方案
2014/02/19 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
文明寝室标语
2014/06/13 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2016党校学习心得体会
2016/01/07 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
python实现简单的井字棋
2021/05/26 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python