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

编程小6 Java (3) 2024-06-07 13:23

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说javascript 实现在线多币种汇率实时换算,希望能够帮助你!!!。

运行效果图：

实现原理：

利用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&#

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。