使用新浪股票接口实现股票价格实时刷新Javascript+Ajax+PHP

效果如下：

低于上个交易日收盘价时“当前价格”为绿色，高于则为红色，等于为黑色；

当股票价格上升时，背景闪烁红色一下，下降时闪缩绿色。

（这个接口可以返回很多数据，包括买一价格、买一手数、当日最高价等信息，这个例子里面只写出了股票名称、股票代码、上个交易日的收盘价和当前价格）

关于这个接口具体返回的数据可以看这篇新浪实时股票数据接口http://hq.sinajs.cn/list=code

下面是后台的PHP代码（getStockInfo.php):

<?php
    header("Content-Type:text/html;charset=gb2312");
    header("Access-Control-Allow-Origin: http://hq.sinajs.cn/");
    $stockInfoString = file_get_contents("http://hq.sinajs.cn/list=sh000001");
   
    $result=explode(",",$stockInfoString);//将返回的字符串根据逗号分割为字符串
    $stockInfo=array();//最终输出的，包含股票信息的数组

    // 根据正则表达式提取股票名称
    $name=$result[0]."\"";
    $name=preg_match_all('/\"(.*?)\"/', $name, $matches);
    $name=str_replace("\"","",$matches[0][0]);

    // 根据正则提取股票代码（包含sz/sh）
    if (preg_match("/sz/", $result[0])) {
    	$result[0]=preg_replace('/\D/s', '', $result[0]);
    	$code="sz".$result[0];
    }
    else if (preg_match("/sh/", $result[0])) {
    	$result[0]=preg_replace('/\D/s', '', $result[0]);
    	$code="sh".$result[0];
    }

    $stockInfo[0]=$name;//股票名称
    $stockInfo[1]=$code;//股票代码

    for ($i=2; $i < count($result); $i++) { //将其他信息赋给最终输出的数组
    	$stockInfo[$i]=$result[$i-1];
    }

    $out="";
   	for ($i=0; $i < count($stockInfo); $i++) { //输出
        $out=$out.$stockInfo[$i]."#";
   	}
    echo $out;
 ?>

下面是getStockInfo.php返回的数据：

接下来是前端的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(function(){

			setInterval(getStockInfo,3000);//每3秒执行一次查询

			function getStockInfo(){ 
				$.ajax({ 
					type:"post", 
					url:"getStockInfo.php",
					
					success:function(msg){ 
						
						var result=msg.split("#");//将返回的信息根据#分隔开
						var pirceJustBefore=$('#nowPrice').text();	
						$('#name').html(result[0]);
						$('#code').html(result[1]);		
		
						var yesterdayClosingPrice=result[3];
						$('#yesterdayClosingPrice').html(result[3]);

						var nowPrice=result[4];
						$('#nowPrice').html(result[4]);

						if (nowPrice>pirceJustBefore) {
							$('#nowPriceBackground').fadeIn(500);
							$('#nowPriceBackground').css("background","#ff7070cf");
						}
						else if (nowPrice<pirceJustBefore) {
							$('#nowPriceBackground').css("background","#77ff45cf");
							$('#nowPriceBackground').fadeIn(500);
						}
						else if (nowPrice==pirceJustBefore) {}
						$('#nowPriceBackground').fadeOut(500);


						if (nowPrice>yesterdayClosingPrice) {
							$('#nowPrice').css("color","red");
						}
						else if (nowPrice<yesterdayClosingPrice) {
							$('#nowPrice').css("color","green");
						}
						else if (nowPrice==yesterdayClosingPrice) {
							$('#nowPrice').css("color","black");
						}

					}, 
							
					error:function(){ 
						//alert("wrong"); 
					}
				});			 
			}
		});
	</script>

	<style type="text/css">
		html,body{
			margin: 0px;
		    padding: 0px;
		    border: 0px;
		    list-style: none;
		    text-decoration: none;
		}

		#all{
			width: 60%;
			height: 100%;
			margin: 100px auto;
		}

		#nowPrice{
			position: absolute;
			z-index: 0;
			width: 200px;
			height: 100px;
			font-weight: bolder;
			font-size: xx-large;
		}
		#nowPriceBackground{
			display: none;
			color: black;
			z-index: -1;
			width: 200px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="all">
		<h3>股票价格实时刷新</h3>
		<div id="nameAndCode">
			<span id="name"></span>
			<span id="code"></span>
		</div>
		<br>
		<small>昨日收盘价</small>
		<div id="yesterdayClosingPrice"></div>
		<small>当前价格</small>
		<div id="nowPriceBox">
			<div id="nowPrice"></div>
			<div id="nowPriceBackground"></div>
		</div>
	</div>
</body>
</html>

注意各个div的position属性即可

(任何问题：[email protected])

使用新浪股票接口实现股票价格实时刷新Javascript+Ajax+PHP

猜你喜欢