Javascript调用新浪股票数据接口返回的股票价格代码(普通版)

通过调用新浪实时股票数据接口返回的数据实现指定股票数据的调用,以下代码非实时更新,刷新页面才会更新股票数据。

gupiao.png

步骤:

1、以中国平安的股票代码为例,调用新浪股票数据接口:

<script type="text/javascript" src="http://hq.sinajs.cn/list=sh601318"></script>

2、HTML代码:

<div class="data">
	<div class="inner">					
		<ol>
			<li>
				<h2>中国平安(601318)</h2>
				<div class="clear"></div>
				<span id="p" class="price"></span>
				<span id="ud" class="ud"></span>
			</li>
			<li>
				<h3>成交量(万手)</h3>
				<p id="v"></p>
			</li>
			<li>
				<h3>成交额(万元)</h3>
				<p id="t"></p>
			</li>
		</ol>
	</div>
</div>

CSS样式代码:(仅供参考,请自行调整样式)

.data {background-color:#f8f8f8;padding:15px 0;}
.data li {padding:15px 20px;border-bottom:1px solid #d8d8d8;overflow:hidden;}
.data li:last-child {border-bottom:0;}
.data li p {font-size:48px;color:#ababab;line-height:1em;}
.data li i {font-style:normal;color:#ababab;}
.data li i.up {color:#ff1515;}
.data li i.down {color:#090;}
.data li .price {font-size:12px;line-height:1em;padding-right:15px;}
.data li .ud {font-size:24px;}
.data li .ud i {background:no-repeat left center;background-size:16px auto;padding-left:30px;}
.data li .ud .up {background-image:url(../images/icon_up.png);}
.data li .ud .down {background-image:url(../images/icon_down.png);}
.data h2,.data h3 {font-size:28px;color:#333;font-weight:normal;line-height:1.125em;margin-bottom:25px;}

Javascript代码:

<script>
var _array = new Array();
_array = hq_str_sh600491.split(",");
var _v = _array[8] / 1000000;
var _t = _array[9] / 10000;
document.getElementById('v').innerText = _v.toFixed(2);				
document.getElementById('t').innerText = _t.toFixed(2);
var _num = (_array[3] -_array[2]) / _array[2] * 100;
var _rate = _num.toFixed(2);

if(_array[3] < _array[2]){
	var _price = '<i class="down">' + _array[3] + '</i>';
	var _ud = '<i class="down">' + _rate + '%</i>';
}else if(_array[3] == _array[2]){
	var _price = '<i>' + _array[3] + '</i>';
	var _ud = '<i>' + _rate + '%</i>';
}else {
	var _price = '<i class="up">' + _array[3] + '</i>';
	var _ud = '<i class="up">' + _rate + '%</i>';
}
document.getElementById('p').innerHTML = _price;				
	document.getElementById('ud').innerHTML = _ud;
</script>