我的JavaScript经典参考例子

1.全国公交IC卡网上充值平台https://application.dodopal.com:9998/fapayf/chargeCard.action

<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
xmlHttp=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}
}
//取城市
function getCity(){
document.getElementById("citySpan").innerHTML="<img src='https://application.dodopal.com:9998/fapayf/images/ajax-loader.gif'/>正在加载城市信息，请稍后...";
//document.all.chargeItem.focus();
if(!xmlHttp)
{
createXMLHttpRequest();
}
xmlHttp.open("POST", "https://application.dodopal.com:9998/fapayf/chargeCardCity.action",true);
xmlHttp.onreadystatechange = setCity;
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');
xmlHttp.send(null);
}
//城市取到后反显
function setCity(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById("citySpan").innerHTML=xmlHttp.responseText;
changeCity();
}
}
//选择城市
function changeCity(){
//var yktid = document.getElementById("yktid").value;
var radios=document.getElementsByName("yktid");
var theRadioValue = 0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
theRadioValue = radios[i].value;
break;
}
}
getJinE(theRadioValue);//加载银行费率
}
//加载OCX
function getOCX(yktid){
document.getElementById("displayframe").src="https://application.dodopal.com:9998/fapayf/getOCX.action?yktid="+yktid;
}
//取银行费率
function getJinE(yktid){
if(!xmlHttp)
{
createXMLHttpRequest();
}
xmlHttp.open("POST", "https://application.dodopal.com:9998/fapayf/getJinE.action?yktid="+yktid,true);
xmlHttp.onreadystatechange = setFeiLv;
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');
xmlHttp.send(null);
}
function setFeiLv(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById("feilv").innerHTML = xmlHttp.responseText;
setBank();
}
}
//根据支付方式设置银行
function setBank(){
var radios=document.getElementsByName("payType");
var theRadioValue = 0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
theRadioValue = radios[i].value;
if(theRadioValue!="72" && theRadioValue!="71" && theRadioValue!="2"){
theRadioValue="73";
}
break;
}
}
if(theRadioValue==0){
alert("请选择支付方式！！");
}else{
var s = document.getElementById("blankid"); //获取select标记
if(s==null || s=='undefined'){
alert("请先选择您的公交卡所在的城市！！！");
}else{
var ops= s.options; //获取对select标记options的引用
for(var i=0; i<s.length; i++){
var opValue = ops[i].value;
var b22 = opValue.split("-");
if(b22[0]==theRadioValue){
s.options[i].selected=true;
break;
}
}
}
}
}
//输入充值金额后触发的事件
function setChargeItem(chargeValue){
if(chargeValue==""){
return;
}
if(parseInt(chargeValue)%10!=0){ //校验是否为10的整倍数
alert( '必须输入10的倍数 ') ;
document.all.chargeItem.value='';
}else{
//计算手续费及总金额
if(Number(chargeValue)>1000){
alert("充值最大金额不能超过1000！！！");
document.all.chargeItem.value='';
}else{
fee();
}
}
}
//计算费率
function fee(){
var radios=document.getElementById("chargeItem").value;
var x1 = radios;
var x2= document.getElementById("blankid").value;
var x22=x2.split("-");
var x222=x22[1];
var zongjinezej=x1*x222+Number(x1);
//手续费
document.all.shouxufei.innerText=x1*x222+"元";
//总金额
document.all.zongjineid.innerText=zongjinezej+"元";
}
//变换支付方式
function changeBank(){
var s = document.getElementById("blankid"); //获取select标记
if(s==null || s=='undefined'){
alert("请先选择您的公交卡所在的城市！！！");
}else{
setBank();
fee();
}
}
//充值校验
function checkCharge(ev){
var objPos = mousePosition(ev);
var chargeValue = document.all.chargeItem.value;
if(chargeValue=='' || chargeValue==' '){
alert("请输入充值金额！！");
document.all.chargeItem.focus();
}else{
var yktid = document.all.yktid.value;
var radios=document.getElementsByName("yktid");
var theRadioValue = 0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
theRadioValue = radios[i].value;
break;
}
}
getOCX(theRadioValue);//加载OCX
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
var isIe=(document.all)?true:false;
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,mwidth){
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#ffffff;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
var v_top=(document.body.clientHeight-mesW.clientHeight)/2;
v_top+=document.documentElement.scrollTop;
styleStr="top:180px;position:absolute;width:"+mwidth+";z-index:9999;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//渐变
function showBackground(obj,endInt){
if(isIe) {
obj.filters.alpha.opacity+=5;
if(obj.filters.alpha.opacity<endInt){
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.05;
obj.style.opacity=al;
if(al<(endInt/100)){
setTimeout(function(){showBackground(obj,endInt)},5);
}
}
}
function closeWindow() {
if(document.getElementById('back')!=null){
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null) {
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//测试弹出
function testMessageBox() {
//var objPos = mousePosition(ev);
var buffer ="";
buffer+="<p style='color:#333333; font-size:14px;'><strong>付款遇到问题</strong></p>";
buffer+="<p style='color:#666666; font-size:12px;'>付款完成前请不要关闭此窗口。完成付款后请根据你的情况点击下面的按钮。</p>";
buffer+="<p style='color:#333333; font-size:12px;'><strong>请在新开网上储蓄卡页面完成付款后再选择。</strong></p> ";
buffer+="<p>&nbsp;</p>";
buffer+="<p align='center'><a href='javascript:void(0)' onclick='checkOrderInfo();return false;'><img src='https://application.dodopal.com:9998/fapayf/payimage/fii/images/wanchengfukuan.gif' alt='完成付款' name='Image2' width='94' height='35' border='0' id='Image2' /></a>&nbsp;&nbsp;<a href='https://www.dodopal.com/help.html' target='_self'><img src='https://application.dodopal.com:9998/fapayf/payimage/fii/images/yudaowenti.gif' alt='遇到问题' name='Image3' width='94' height='35' border='0' id='Image3' /></a></p>";
messContent=buffer
showMessageBox('窗口标题title',messContent,'',400);
}
//用户确认订单信息
function orderInfo(){
var radios=document.getElementsByName("yktid");
var theRadioValue = 0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
theRadioValue = radios[i].value;
break;
}
}
var city = document.getElementById(theRadioValue).outerText;
var chargeItem = document.getElementById("chargeItem").value;
var shouxufei = document.all.shouxufei.outerText;
var zongjine = document.all.zongjineid.outerText;
var bankid = document.getElementById("blankid").value;
var radios1=document.getElementsByName("payType");
var gateID = 0;
for(var j=0;j<radios1.length;j++)
{
if(radios1[j].checked==true)
{
gateID = radios1[j].value;
break;
}
}
var buffer ="";
buffer+="<table style='width:100%'>";
buffer+="<tr>";
buffer+="<td colspan='2'>";
buffer+="<span class='ybiaotiyanse' ><strong>充值订单信息</strong></span>";
buffer+="</td></tr>";
buffer+="<tr><td align='right'>";
buffer+="<span class='ywenziyanse'>所属城市：</span></td><td><span style='font-size:14px; color:#000000; line-height:24px;'>"+city+"</span></td></tr>";
buffer+="<tr><td align='right'>";
buffer+="<span class='ywenziyanse'>充值金额：</span></td><td><span style='font-size:14px; color:#000000; line-height:24px;'>"+chargeItem+"元</span></td></tr>";
buffer+="<tr><td align='right'>";
buffer+="<span class='ywenziyanse'>手续费：</span></td><td><span style='font-size:14px; color:#000000; line-height:24px;'>"+shouxufei+"</span></td></tr>";
buffer+="<tr><td align='right'>";
buffer+="<span class='ywenziyanse'>支付金额：</span></td><td><span style='font-size:14px; color:#000000; line-height:24px;'>"+zongjine+"</span></td></tr>";
buffer+="<tr><td align='right'>";
//alert("gateID="+gateID);
if(gateID=="2")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>银联</td></tr>";
else if(gateID=="72")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>支付宝</td></tr>";
else if(gateID=="71")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>财付通</td></tr>";
else if(gateID=="ICBC")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>中国工商银行</td></tr>";
else if(gateID=="CCB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>中国建设银行</td></tr>";
else if(gateID=="CMB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>招商银行</td></tr>";
else if(gateID=="HSBC")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>交通银行</td></tr>";
else if(gateID=="ABC")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>中国农业银行</td></tr>";
else if(gateID=="CEB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>中国光大银行</td></tr>";
else if(gateID=="BOC")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>中国银行</td></tr>";
else if(gateID=="PSBC")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>中国邮政储蓄银行</td></tr>";
else if(gateID=="SPDB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>浦发银行</td></tr>";
else if(gateID=="GDB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>广发银行</td></tr>";
else if(gateID=="CITIC")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>中信银行</td></tr>";
else if(gateID=="HXB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>华夏银行</td></tr>";
else if(gateID=="BEA")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>东亚银行</td></tr>";
else if(gateID=="BHBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>渤海银行</td></tr>";
else if(gateID=="CIB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>兴业银行</td></tr>";
else if(gateID=="CMBC")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>民生银行</td></tr>";
else if(gateID=="DGCBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>东莞银行</td></tr>";
else if(gateID=="DLCBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>大连银行</td></tr>";
else if(gateID=="FDBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>富滇银行</td></tr>";
else if(gateID=="GZCBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>广州银行</td></tr>";
else if(gateID=="GZMBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>广州市商业银行</td></tr>";
else if(gateID=="HBBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>河北银行</td></tr>";
else if(gateID=="HSBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>徽商银行</td></tr>";
else if(gateID=="JSBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>江苏银行</td></tr>";
else if(gateID=="NBBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>宁波银行</td></tr>";
else if(gateID=="NXBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>宁夏银行</td></tr>";
else if(gateID=="QLBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>齐鲁银行</td></tr>";
else if(gateID=="SDB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>深圳发展银行</td></tr>";
else if(gateID=="SHRCB")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>上海农商银行</td></tr>";
else if(gateID=="SPA")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>平安银行</td></tr>";
else if(gateID=="SZCBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>苏州银行</td></tr>";
else if(gateID=="WZMBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>温州银行</td></tr>";
else if(gateID=="XMCBK")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>厦门银行</td></tr>";
else if(gateID=="73")
buffer+="<span class='ywenziyanse'>支付方式：</span></td><td>易生支付</td></tr>";
buffer+="<tr><td colspan='2'></td></tr>";
buffer+="<tr><td colspan='2'><p align='center'><a href='javascript:void(0)' onclick='toBank()'><img src='https://application.dodopal.com:9998/fapayf/payimage/fii/images/querendingdan.gif' alt='登录' name='Image3' width='94' height='35' border='0' id='Image3' /></a></p></td></tr>";
buffer+="</table>";
messContent=buffer;
showMessageBox('充值订单信息',messContent,'',400);
}
//跳转到银联
function toBank(){
testMessageBox();
var radios=document.getElementsByName("yktid");
var theRadioValue = 0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
theRadioValue = radios[i].value;
break;
}
}
var chargeItem = document.getElementById("chargeItem").value;
var bankid = document.getElementById("blankid").value;
var radios1=document.getElementsByName("payType");
var gateID = 0;
for(var j=0;j<radios1.length;j++)
{
if(radios1[j].checked==true)
{
gateID = radios1[j].value;
break;
}
}
window.open("https://application.dodopal.com:9998/fapayf/chargeCardR.action?yktid="+theRadioValue+"&chargeItem="+chargeItem+"&blankid="+bankid+"&gateID="+gateID);
}
//点击完成充值查询订单状态
function checkOrderInfo(){
var bankorderid = document.all.bankorderid.value;
var tlbankorder = document.all.tlbankorder.value;
if(bankorderid=="0" || tlbankorder==""){
alert("没有提交任何订单，请重新下单！！");
window.location.reload();
}else{
window.location.href="checkChargeCard.action?bankorderid="+bankorderid+"&tlbankorder="+tlbankorder;
}
}
function otherBank(){
var obj = document.getElementById('otherbank');
if(obj.style.display=='block'){
obj.style.display='none';
}else{
obj.style.display='block'
}
}
</script>