一个支付页面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 操作XML入门
Dec 25 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
vue基于Teleport实现Modal组件
May 31 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邮件专题
2006/10/09 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php多任务程序实例解析
2014/07/19 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php中序列化与反序列化详解
2017/02/13 PHP
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
Javascript实现单例模式
2016/01/24 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
vue实现搜索功能
2019/05/28 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Python的logging模块基本用法
2020/12/24 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
车间组长岗位职责
2013/12/20 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers