一个支付页面DEMO附截图

2024-10-24 15:03:36

代码如下：

<!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>

一个支付页面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="Co
jsp+servlet实现简单登录页面功能(附demo)

目录实现功能: 开发环境: 预备知识: 1.登录界面login.jsp: 2.登录成功界面hello.jsp: 3.登录失败信息回显Login.jsp: 思路简述: 具体代码Code: 实现功能: 模拟简单登录功能,登录成功跳转新页面,登录失败在原登录界面提示登录失败信息开发环境: eclipse Tomcat-8.0 预备知识: HTML标签,Servlet相关知识--请求的转发与重定向,jsp相关知识,EL表达式思路实现:共2个jsp,一个servlet 1.登录界面login.jsp
SSH框架网上商城项目第22战之银行图标以及支付页面显示

从上一节的小demo中我们搞清楚了如何跟易宝对接以及易宝的支付流程.这一节我们来做一下支付页面以及在页面中导入银行图标. 1. 存储银行图标银行图标一般不会总是去加载,因为这些东西是死的,没必要每次进入支付页面就去加载银行图标,这样性能会受到一定的影响.这让我们联想到了之前的加载首页数据了,其实跟那个道理是一样的,我们可以在项目启动的时候就将银行图标资源加载到application中,后面用到了就直接在application域中取就行了.所以跟原来一样,我们在监听器中加载银行图标. 银行图标易
NodeJS整合银联网关支付（DEMO）

银联支付的测试开发做的很完善,可以下载各个语言的测试包,进行开发测试,但是并没有 nodejs 的,难点就是证书签名还有验签这两个步骤. 其实银联加密方式和支付宝微信不同的地方在于,使用了非对称加密,意思是为了在网络中传输安全,双方约定各自产生一个公钥还有私钥,私钥自己保存,公钥公开给对方(你要发送信息的人都知道).当需要传输秘密的信息时候,用自己的私钥加密,发给对方,对方收到信息后,为了判定这个是否伪造(是不是确实从你这儿发送给他的),那么拿出你的公钥进行验证,发现是一样的,那么就可以确定这个
JS支付页面倒计时的实现示例

js简单实现支付页面跳转: 点击支付,跳出提示框,点击确定跳转支付成功页面二,从10开始倒计时,跳转到主页面,主页面连接到百度页面页面1,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&qu
一个JSP页面导致的tomcat内存溢出的解决方法

今天新能测试组的同事找我看一个奇怪的现象.一个tomcat应用,里面只有一个单纯的jsp页面,而且这个jsp页面没有任何java代码(想用这个jsp页面测试在她的服务器上的一个tomcat的最大QPS).但是用loadrunner压测了几分钟之后,分配了1024M堆内存的tomcat居然包heap space outofmemory!这个页面的代码如下: 复制代码代码如下: <%@ page language="java" contentType="text/html
vue-cli3.0实现一个多页面应用的历奇经历记录总结

本文实例讲述了vue-cli3.0实现一个多页面应用的历奇经历.分享给大家供大家参考,具体如下: 故事背景这是在刚请完假回来,一切都在计划之中,早上一来,就接到项目经历的新的需求(这个是烂摊子,已经好几个人接手,离职),我内心是拒绝的,可最后办法,没有其他人去做,最后就落在了我头上. 接到需求,先看了需求,跟以前的比起来,改动挺大,数据结构全改了,如果在原来的基础上改,成本有点大,所以,就想着重启项目来实现.于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目,但突然,一个会议又来
Flutter 开发一个登录页面

业务逻辑为了演示登录跳转,在分类浏览先做了一个简单的按钮,点击跳转到登录页面.实际的 App 中,通常会是触发某些需要登录才能查看的操作后再跳转到登录界面. 布局分析界面如上图所示,从界面上看,整体内容区域是居中的,内容的布局是一个简单的列式布局,包括了顶部的一个 Logo(通常是 App图标),再往下是两个文本输入框,最后是登录按钮.整体布局比较简单,使用 Center 下嵌一个Column 进行列布局即可. 图片圆形裁剪在 Flutter 中实行图片圆形裁剪有两个方式,一是使用外层的容
我用Python给班主任写了一个自动阅卷脚本(附源码)

导语幼儿园升小学,小学升中学,中学升高中.......... 每个人都要经历的九年义务教育:伴随的都是作业.随堂考.以及每个科目的大大小小的考试.当然小编被考试支配的恐惧以及过去了哈~除了学生考试的压力之外. 有调查发现,目前老师大量的时间被小型考试,如课堂测验.周测等高频次测验的批改客观题.计分.登分等占用,被迫压缩了备课.精准辅导的时间. 今天小编带大家做一款解放教师的自动阅卷系统. 几千张的答题卡扫描录入电脑阅卷系统,老师们只需打开电脑登陆,即可找到自己要批改的那道题. 大大提高了改卷效
jsf实现微信小程序简洁登录页面（附源码）

上图: 用户不存在: 代码: login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  <view class="v2"> <view class="dltext" style="wi

一个支付页面DEMO附截图

相关推荐

随机推荐