效果如下:
低于上个交易日收盘价时“当前价格”为绿色,高于则为红色,等于为黑色;
当股票价格上升时,背景闪烁红色一下,下降时闪缩绿色。
(这个接口可以返回很多数据,包括买一价格、买一手数、当日最高价等信息,这个例子里面只写出了股票名称、股票代码、上个交易日的收盘价和当前价格)
关于这个接口具体返回的数据可以看这篇新浪实时股票数据接口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属性即可
扫描二维码关注公众号,回复:
544092 查看本文章
(任何问题:[email protected])