js实现股票实时刷新数据案例

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2016-10-30
下面小编就为大家带来一篇js实现股票实时刷新数据案例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

近来学习炒股,免不了上班时间看盘,总不能光明正大的用电脑看行情,一直盯着手机影响也不好,容易引起“关注”。

所以就想自己做一个网页来达到看盘的目的,一个只显示几个关键数字的网页肯定不会引起怀疑。有想法了,就开始实现吧。

准备工作:

1、数据来源

2、网页数据显示

先帖出来源码,后面讲解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var stockCode="600804";
$(document).ready(function(){
  getNewData();
   var tg=self.setInterval("getNewData()",2000);//N毫秒刷新一次,1000毫秒=1秒
});
//获取新数据
function getNewData()
{
  if(getQueryString('c')!=undefined)
  {
    stockCode=getQueryString('c');
  }
  var type=stockCode[0]==6?1:2;
  var durl="http://flashquote.stock.hexun.com/Stock_Combo.ASPX?mc="+type+"_"+stockCode+"&dt=T&t="+Math.random();
  $.getScript(durl,function(data){
    //加载脚本并执行
  });
}
//刷新显示
function refreshData(code,type,tip,data)
{ 
 
   
  var result="";
  result+=code;
  result+="<br/>";
  result+= data[1]+'\t'+data[2]+'\t'+data[3]+'\t'+data[4]+'\t  '+data[5]+'\t'+percent+'%';
  
  result+='<div style="height:10px;width:100px;"></div>'  
   
  result+=''+data[24]+'\t\t'+data[25];
  result+='<br/>'+data[22]+'\t\t'+data[23];
  result+='<br/>'+data[20]+'\t\t'+data[21];
  result+='<br/>'+data[18]+'\t\t'+data[19];
  result+='<br/>'+data[16]+'\t\t'+data[17];
     
  result+='<div style="height:1px;width:100px; border-top:dashed 1px #CCCCCC"></div>'       
  result+=''+data[6] +'\t\t'+data[7];
  result+='<br/>'+data[8] +'\t\t'+data[9];
  result+='<br/>'+data[10]+'\t\t'+data[11];
  result+='<br/>'+data[12]+'\t\t'+data[13];
  result+='<br/>'+data[14]+'\t\t'+data[15];
 
  $("#result").html(result);
}
//getQueryString获取url参数
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]); return null;
}
</script>
</head>
<body>
  <div  style="color:#CCCCCC;"></div>
</body>
</html>

数据来源

如果不知道现有可用的数据源,就百度吧。百度搜索“股票数据接口”

搜到的结果如下,这是一个浪新博客里的,相信读者都能很容易的找到。

Sina股票数据接口

以大秦铁路(股票代码:601006)为例,如果要获取它的最新行情,只需访问浪新的股票数据

接口:http://hq.sinajs.cn/list=sh601006这个url会返回一串文本,例如:

var hq_str_sh601006="大秦铁路, 27.55, 27.25, 26.91, 27.55, 26.20, 26.91, 26.92,
22114263, 589824680, 4695, 26.91, 57590, 26.90, 14700, 26.89, 14300,
26.88, 15100, 26.87, 3100, 26.92, 8900, 26.93, 14230, 26.94, 25150, 26.95, 15220, 26.96, 2008-01-11, 15:05:32";

这里用我自己熟悉的一个“接口”,我经常在和讯网上看行情,财经新闻等,知道它有一个可用的数据来源。这里还是详细点说明一下我是怎么发现“接口”的。

在浏览器里打开一只个股的页面,如http://stockdata.stock.hexun.com/gghq_600050.shtml。然后打开浏览器的开发工具,我用的chrome,火狐里有firebug也挺好。切换到开发工具的“网络”标签,观察一下,很容易就能找到隔几秒,就会加载一个js,如图1所示

js实现股票实时刷新数据案例

图1

链接地址 flashquote.stock.hexun.com/Stock_Combo.ASPX?mc=1_600050&dt=MX,DL&t=0.9482741139363497

就是这样一个连接,在浏览器里打开,可以看到如下的内容

refreshData('600050','1','Q',['20140414150001','3.16','3.16','3.16','3.13','3.14','3.13','3668496','3.12','3011500','3.11','1858100','3.10','2850000','3.09','955100','3.14','61400','3.15','4566385','3.16','3849399','3.17','1490702','3.18','2654615','55099344','172995571','8700','0.49','19.33','0.0026','31982854','22913509']);refreshData('600050','1','MX',[['1458','3.15','129800','407904'],['1459','3.14','580900','1824318'],['1500','3.14','8700','27318']]);refreshDeal('DL',[['150001','3.14','8700','2'],['145956','3.14','3700','2'],['145951','3.14','30500','1'],['145946','3.15','1100','2'],['145941','3.15','100','2'],['145936','3.14','508000','1'],['145921','3.14','2000','1'],['145916','3.14','6000','1'],['145906','3.15','28500','2'],['145901','3.14','1000','1']]);

这是一段js脚本,执行refreshData方法,其他就是这个方法的参数了。参数一看就明白了,正是股票的实时盘口数据。

网页数据显示

数据来源已经有了,开始第二步吧。做一个网页来加载这些数据。做js简单的就是用jquery吧, 一个很优秀的js库。

这一步比较简单,用jquery里的ajax方法加载数据,显示。

加载方法 $.getScript。因为原数据里有个refreshData方法,加载完成后会自动执行的,所以我的代码里也声明了一个同名方法在这里处理就行了。refreshData里把参数,和参数对应的内容显示到div里,怎么样都行,只要能在页面上看到。

setInterval用这个方法,让页面自动刷新,N秒钟执行一次。

getQueryString 这个方法是获取页面参数的,我们不可能只看一只股票,要看别的股票就要改代码,虽然不难,但用参数更简单,现在想看哪只股票,只要在页面url后添加参数demo.html?c=000777,这样就搞定了

以上这篇js实现股票实时刷新数据案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • js选择器全面解析
    下面小编就为大家带来一篇js选择器全面解析.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElemen ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • 将PHP的session数据存储到数据库中的代码实例
    这里我们将分享两个将PHP的session数据存储到数据库中的代码实例,分别针对PostgreSQL与MySQL,需要的朋友可以参考下一个开发环境有多个网站,需要使用不同的session,解决方案很多.不过这次也高大上一把,用数据库存,方便以后扩展. PostgreSQL版首先是数据库的部分 --drop table php_session create u ...
  • 关于html嵌入xml数据岛如何穿过树形结构关系的问题
    html里面引用xml的数据岛,如何穿过树形结构的关系,我不知道这个datafld里面应该如何使用xml里面的标签名称,如何加前缀,如何从resume得到name子元素如下面的代码细节,html里面引用xml的数据岛,如何穿过树形结构的关系? 我不知道这个datafld里面应该如何使用xml里面的标签名称,如何加前缀,如何从resume得到name子元素?同 ...
  • 解读ASP.NET5&MVC6系列教程1:ASP.NET5简介
    这篇文章主要介绍ASP.NET 5简介以及对各个版本号进行解释,ASP.NET 5中新的变化,需要的朋友可以参考下.ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET C ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
猜你喜欢