javascript 实现在线多币种汇率实时换算

本文介绍了一种使用JavaScript和Yahoo汇率接口实现在线多币种汇率实时换算的方法。通过jsonp技术获取汇率数据,并利用jQuery库进行定时更新,确保数据接近实时。

运行效果图:

    

实现原理:

      利用jsonp思路,巧妙编写 yahoo汇率接口(http://finance.yahoo.com/connection/currency-converter-cache?date=当前日期)回调函数, 通过定时执行(每5秒数更新一次汇率数据的方法),达成近似实时的汇率换算

依赖:jquery.js

实现: 

新建网页 huilv.html ,内容如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script src="huilv.js"></script> 
</head>
<body>
<div t="y_huilv"><input name="src" /><select name='srcCon'></select> <input name="out" /><select name='outCon'></select></div>
<div t="y_huilv"><input name="src" /><select name='srcCon'></select> <input name="out" /><select name='outCon'></select></div>
</body>
</html>

新建huilv.js,内容如下

var YAHOO = YAHOO||{};
YAHOO.DATA=YAHOO.DATA||{};
YAHOO.DATA['USD']=1;
YAHOO.Finance= {
	CurrencyConverter: {
		addConversionRates: function(data) {
			var resources = data.list.resources;
			YAHOO.DATA=YAHOO.DATA||{};
			for (var i in resources) {
				try{
					var res = resources[i].resource.fields;
					var name = res.symbol.replace("=X", "");
					var price = res.price;
					YAHOO.DATA[name]=price;
				}catch(e){
				}
			}
			YAHOO.JITS.each(function(){
				jit.find("input[name=src]").change();
			})
		}
	}
}
YAHOO.item=function(){
	var dateStr=YAHOO.format(new Date(),'yyyyMMdd');
	var url = "http://finance.yahoo.com/connection/currency-converter-cache?date="+dateStr;
	var script = document.createElement('script');
	script.setAttribute('src', url);
	document.getElementsByTagName('head')[0].appendChild(script); 
	YAHOO.JITS.each(function(){
		$(this).find("[name=src]").change();
	})
};

YAHOO.init=function(jits){
	YAHOO.JITS=jits;
	try{
		if(YAHOO.GID!=undefined){
	 		clearInterval(YAHOO.GID);
		}
	}catch(e){
	}
	jits.each(function(){
		var jit=$(this);
		var items="<option selected='selected' value='USD'>美元 (USD)</option><option value='CNY'>人民幣 (CNY)</option><option value='HKD'>港元 (HKD)</option><option value='EUR'>歐元 (EUR)</option><option value='GBP'>英鎊 (GBP)</option><option value='AUD'>澳元 (AUD)</option><option value='CAD'>加拿大元 (CAD)</option><option value='CHF'>瑞士法郎 (CHF)</option><option value='IDR'>印尼盾 (IDR)</option><option value='INR'>印度盧比 (INR)</option><option value='JPY'>日圓 (JPY)</option><option value='THB'>泰銖 (THB)</option><option value='ALL'>阿爾巴尼亞列克 (ALL)</option><option value='DZD'>阿爾及利亞第納爾 (DZD)</option><option value='XAL'>鋁 (每盎司) (XAL)</option><option value='ARS'>阿根廷比索 (ARS)</option><option value='AWG'>阿魯巴島弗羅林 (AWG)</option><option value='BSD'>巴哈馬元 (BSD)</option><option value='BHD'>巴林第納爾 (BHD)</option><option value='BDT'>孟加拉塔卡 (BDT)</option><option value='BBD'>巴貝多元 (BBD)</option><option value='BYR'>白俄羅斯盧布 (BYR)</option><option value='BZD'>貝里斯元 (BZD)</option><option value='BMD'>百慕達元 (BMD)</option><option value='BTN'>不丹, 努爾特魯姆 (BTN)</option><option value='BOB'>玻利維亞諾 (BOB)</option><option value='BWP'>波札那普拉 (BWP)</option><option value='BRL'>巴西雷亞爾 (BRL)</option><option value='BND'>汶萊元 (BND)</option><option value='BGN'>保加利亞列弗 (BGN)</option><option value='BIF'>蒲隆地法郎 (BIF)</option><option value='KHR'>柬埔寨里耳 (KHR)</option><option value='CVE'>維德角埃斯庫多 (CVE)</option><option value='KYD'>開曼群島元 (KYD)</option><option value='XOF'>CFA 法朗 (BCEAO) (XOF)</option><option value='XAF'>CFA 法朗 (BEAC) (XAF)</option><option value='CLP'>智利比索 (CLP)</option><option value='COP'>哥倫比亞比索 (COP)</option><option value='KMF'>科摩羅法朗 (KMF)</option><option value='XCP'>銅 (每鎊) (XCP)</option><option value='CRC'>哥斯大黎加哥隆 (CRC)</option><option value='HRK'>克羅埃西亞庫納 (HRK)</option><option value='CUP'>古巴比索 (CUP)</option><option value='CZK'>捷克克朗 (CZK)</option><option value='DKK'>丹麥克朗 (DKK)</option><option value='DJF'>吉布地法朗 (DJF)</option><option value='DOP'>多明尼加比索 (DOP)</option><option value='XCD'>東加勒比元 (XCD)</option><option value='ECS'>厄瓜多爾蘇克雷 (ECS)</option><option value='EGP'>埃及鎊 (EGP)</option><option value='SVC'>薩爾瓦多哥隆 (SVC)</option><option value='ERN'>厄利垂亞納克法 (ERN)</option><option value='EEK'>愛沙尼亞克朗 (EEK)</option><option value='ETB'>衣索比亞比爾 (ETB)</option><option value='FKP'>福克蘭群島鎊 (FKP)</option><option value='FJD'>斐濟元 (FJD)</option><option value='GMD'>甘比亞達拉西 (GMD)</option><option value='GHC'>迦納西迪 (GHC)</option><option value='GIP'>直布羅陀鎊 (GIP)</option><option value='XAU'>金 (每盎司) (XAU)</option><option value='GTQ'>瓜地馬拉給薩 (GTQ)</option><option value='GNF'>幾內亞法朗 (GNF)</option><option value='GYD'>蓋亞那元 (GYD)</option><option value='HTG'>海地古德 (HTG)</option><option value='HNL'>宏都拉斯倫皮拉 (HNL)</option><option value='HUF'>匈牙利福林 (HUF)</option><option value='ISK'>冰島克朗 (ISK)</option><option value='IRR'>伊朗里亞爾 (IRR)</option><option value='IQD'>伊拉克第納爾 (IQD)</option><option value='ILS'>以色列新克爾 (ILS)</option><option value='JMD'>牙買加元 (JMD)</option><option value='JOD'>約旦第納爾 (JOD)</option><option value='KZT'>哈薩克坦吉 (KZT)</option><option value='KES'>肯亞先令 (KES)</option><option value='KRW'>南韓圜 (KRW)</option><option value='KWD'>科威特第納爾 (KWD)</option><option value='LAK'>寮國新普基 (LAK)</option><option value='LVL'>拉脫維亞拉特 (LVL)</option><option value='LBP'>黎巴嫩鎊 (LBP)</option><option value='LSL'>賴索托洛蒂 (LSL)</option><option value='LRD'>賴比瑞亞元 (LRD)</option><option value='LYD'>利比亞第納爾 (LYD)</option><option value='LTL'>立陶宛利塔 (LTL)</option><option value='MOP'>澳門元 (MOP)</option><option value='MKD'>馬其頓第納爾 (MKD)</option><option value='MWK'>馬拉威克瓦查 (MWK)</option><option value='MYR'>馬來西亞零吉 (MYR)</option><option value='MVR'>馬爾地夫拉菲亞 (MVR)</option><option value='MTL'>馬爾他里拉 (MTL)</option><option value='MRO'>茅利塔尼亞烏吉亞 (MRO)</option><option value='MUR'>模里西斯盧比 (MUR)</option><option value='MXN'>墨西哥比索 (MXN)</option><option value='MDL'>摩爾多瓦列伊 (MDL)</option><option value='MNT'>蒙古圖格里特 (MNT)</option><option value='MAD'>摩洛哥迪拉姆 (MAD)</option><option value='MMK'>緬甸基雅特 (MMK)</option><option value='NAD'>納米比亞元 (NAD)</option><option value='NPR'>尼泊爾盧比 (NPR)</option><option value='ANG'>荷屬安的列斯群島盾 (ANG)</option><option value='TRY'>土耳其里拉 (TRY)</option><option value='NZD'>紐西蘭元 (NZD)</option><option value='NIO'>尼加拉瓜科多巴 (NIO)</option><option value='NGN'>奈及利亞奈拉 (NGN)</option><option value='KPW'>北韓圜 (KPW)</option><option value='NOK'>挪威克朗 (NOK)</option><option value='OMR'>阿曼里亞爾 (OMR)</option><option value='XPF'>太平洋島國法朗 (XPF)</option><option value='PKR'>巴基斯坦盧比 (PKR)</option><option value='XPD'>鈀 (每盎司) (XPD)</option><option value='PAB'>巴拿馬巴波亞 (PAB)</option><option value='PGK'>巴布新幾內亞吉納 (PGK)</option><option value='PYG'>巴拉圭瓜拉尼 (PYG)</option><option value='PEN'>秘魯新索爾 (PEN)</option><option value='PHP'>菲律賓比索 (PHP)</option><option value='XPT'>白金 (每盎司) (XPT)</option><option value='PLN'>波蘭茲羅提 (PLN)</option><option value='QAR'>卡塔爾里亞爾 (QAR)</option><option value='RON'>羅馬尼亞新列伊 (RON)</option><option value='RUB'>俄羅斯盧布 (RUB)</option><option value='RWF'>盧旺達法朗 (RWF)</option><option value='WST'>薩摩亞塔拉 (WST)</option><option value='STD'>聖多美杜布拉 (STD)</option><option value='SAR'>沙烏地阿拉伯里亞爾 (SAR)</option><option value='SCR'>塞席爾盧比 (SCR)</option><option value='SLL'>獅子山利昂 (SLL)</option><option value='XAG'>銀 (每盎司) (XAG)</option><option value='SGD'>新加坡元 (SGD)</option><option value='SKK'>斯洛伐克克朗 (SKK)</option><option value='SIT'>斯洛維尼亞托拉爾 (SIT)</option><option value='SBD'>索羅門群島元 (SBD)</option><option value='SOS'>索馬利亞先令 (SOS)</option><option value='ZAR'>南非蘭特 (ZAR)</option><option value='LKR'>斯里蘭卡盧比 (LKR)</option><option value='SHP'>聖赫勒納鎊 (SHP)</option><option value='SDG'>蘇丹鎊 (SDG)</option><option value='SZL'>史瓦濟蘭里蘭吉尼 (SZL)</option><option value='SEK'>瑞典克朗 (SEK)</option><option value='SYP'>敘利亞鎊 (SYP)</option><option value='TWD'>新台幣 (TWD)</option><option value='TZS'>坦尚尼亞先令 (TZS)</option><option value='TOP'>東加帕安卡 (TOP)</option><option value='TTD'>千里達及托巴哥元 (TTD)</option><option value='TND'>突尼斯第納爾 (TND)</option><option value='AED'>UAE 迪拉姆 (AED)</option><option value='UGX'>烏干達先令 (UGX)</option><option value='UAH'>烏克蘭格裡夫納 (UAH)</option><option value='UYU'>烏拉圭新比索 (UYU)</option><option value='VUV'>瓦努瓦圖瓦圖 (VUV)</option><option value='VEF'>委內瑞拉強勢博利瓦 (VEF)</option><option value='VND'>越南盾 (VND)</option><option value='YER'>也門里亞爾 (YER)</option><option value='ZMK'>贊比亞克瓦查 (ZMK)</option><option value='ZWD'>津巴布韋元 (ZWD)</option>";
		jit.find("[name=srcCon]").html("").append(items).val("USD");
		jit.find("[name=outCon]").html("").append(items).val("CNY");
		var jsrc=$("[name=src]");
		jit.find("input").keyup(function(){
			var srcOrOut=$(this).attr("name");
			$(this).parent().attr("src_or_out",srcOrOut);
			YAHOO.change(jit,srcOrOut);
		}).change(function(){
			YAHOO.change(jit,$(this).parent().attr("src_or_out"));
		})
		jit.find("select").change(function(){
			YAHOO.change(jit,$(this).parent().attr("src_or_out"));
		});
	})
	YAHOO.GID=setInterval(YAHOO.item,5000);
	
}
YAHOO.change=function(jit,srcOrOut){
	var jsrc=jit.find("[name=src]");
	var jout=jit.find("[name=out]");
	var srcCon=jit.find("[name=srcCon]").val()
	var outCon=jit.find("[name=outCon]").val()
	try{
		if("out"==srcOrOut){
			var out=Number(jout.val());
			var src=out/YAHOO.DATA[outCon]*YAHOO.DATA[srcCon];
			jsrc.val(src);
		}else{
			var src=Number(jsrc.val());
			var out=src/YAHOO.DATA[srcCon]*YAHOO.DATA[outCon];
			jout.val(out);
		}
	}catch(e){
	}
}
YAHOO.format = function(date, format) {
	var o = {
		"M+": date.getMonth() + 1,
		"d+": date.getDate(),
		"h+": date.getHours(),
		"m+": date.getMinutes(),
		"s+": date.getSeconds(),
		"q+": Math.floor((date.getMonth() + 3) / 3),
		"S": date.getMilliseconds()
	}
	if(/(y+)/.test(format)) 
  format=format.replace(RegExp.$1,(date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
  for(var k in o) 
  if(new RegExp("("+ k +")").test(format)) 
  format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
  return format; 
}

try{
	$(function() {
		YAHOO.init($("[t=y_huilv]"));
	})
}catch(e){}


评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值