一个支付页面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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
JS实现马赛克图片效果完整示例
Apr 13 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 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中数据的批量导入(csv文件)
2006/10/09 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
php中给js数组赋值方法
2014/03/10 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python with标签使用方法解析
2020/01/17 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
消防器材管理制度
2014/01/28 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
环保倡议书范文
2014/05/12 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
mysql配置SSL证书登录的实现
2021/09/04 MySQL
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL