Java教程

javascript+html获取外汇报价并实时更新

本文主要是介绍javascript+html获取外汇报价并实时更新，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用新浪接口http://hq.sinajs.cn/list=外汇代码，Ajax实时刷新，完整代码如下，可根据需求自己进行改动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
ul{
	border: 1px solid #999999;
	margin: 0px auto 0px auto;
	padding: 5px;
	width: 100%;
	display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
	height: auto;
	box-sizing: border-box;
}
li{
	padding: 8px;
	list-style-type: none;
	line-height: 30px;
	min-width: 100px;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #cccccc;
	display: inline-block;
	text-align: left;
	-webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}
li:first-child{
	border-left-style: none;
}
li:hover{
	background-color: rgba(0,0,0,0.85);
	color: #FFFFFF;
	transition-delay:0.25s;
	-webkit-tap-highlight-color: transparent;
}
body {
	padding: 0px;
	margin: 0px;
}
p {
	padding: 0px;
	margin: 0px;
	font-weight: 600;
	height: 30px;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <ul>
		<li>美元指数<p id="info_0"></p></li>
		<li>黄金<p id="info_1"></p></li>
        <li>白银<p id="info_2"></p></li>
        <li>原油<p id="info_3"></p></li>
        <li>欧元/美元<p id="info_4"></p></li>
        <li>英镑/美元<p id="info_5"></p></li>
        <li>纽元/美元<p id="info_6"></p></li>
        <li>澳元/美元<p id="info_7"></p></li>
        <li>美元/日元<p id="info_8"></p></li>
        <li>美元/瑞郎<p id="info_9"></p></li>
        <li>美元/加元<p id="info_10"></p></li>
        <li>英镑/日元<p id="info_11"></p></li>    </ul>
<script type="text/javascript">
$(document).ready(function(){
 $(function () {
 setInterval(function () {
 parseDataM();
 },3000);
 })
});
function parseDataM(){
$.ajax({
url:"http://hq.sinajs.cn/list=DINIW,hf_XAU,hf_XAG,hf_CL,EURUSD,GBPUSD,NZDUSD,AUDUSD,USDJPY,USDCHF,USDCAD,GBPJPY",
 dataType:"script",
 cache:"false",
 type:"GET",
 success:function(a){
 var gp0=hq_str_DINIW.split(",");
 var gp1=hq_str_hf_XAU.split(",");
 var gp2=hq_str_hf_XAG.split(",");
 var gp3=hq_str_hf_CL.split(",");
 var gp4=hq_str_EURUSD.split(",");
 var gp5=hq_str_GBPUSD.split(",");
 var gp6=hq_str_NZDUSD.split(",");
 var gp7=hq_str_AUDUSD.split(",");
 var gp8=hq_str_USDJPY.split(",");
 var gp9=hq_str_USDCHF.split(",");
 var gp10=hq_str_USDCAD.split(",");
 var gp11=hq_str_GBPJPY.split(",");
document.getElementById("info_0").innerHTML = gp0[1];
document.getElementById("info_1").innerHTML = gp1[0];
document.getElementById("info_2").innerHTML = gp2[0];
document.getElementById("info_3").innerHTML = gp3[0];
document.getElementById("info_4").innerHTML = gp4[2];
document.getElementById("info_5").innerHTML = gp5[2];
document.getElementById("info_6").innerHTML = gp6[1];
document.getElementById("info_7").innerHTML = gp7[1];
document.getElementById("info_8").innerHTML = gp8[1];
document.getElementById("info_9").innerHTML = gp9[1];
document.getElementById("info_10").innerHTML = gp10[1];
document.getElementById("info_11").innerHTML = gp11[1];
 }
 });
}
</script>
</body>
</html>
url:"http://hq.sinajs.cn/list=DINIW,hf_XAU,hf_XAG,hf_CL,EURUSD,GBPUSD,NZDUSD,AUDUSD,USDJPY,USDCHF,USDCAD,GBPJPY",

var gp0=hq_str_DINIW.split(",");

list=“外汇代码”，多个用逗号隔开，

gp0=hq_str_“外汇代码”.split(",");

现学现卖功力有限，比较简陋，没有涨幅变动及颜色变换显示功能，本文出自“USDclub”

这篇关于javascript+html获取外汇报价并实时更新的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航