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

2024-10-08 14:53:03

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

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

准备工作：

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 id="result" 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所示

图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实现股票实时刷新数据案例

近来学习炒股,免不了上班时间看盘,总不能光明正大的用电脑看行情,一直盯着手机影响也不好,容易引起"关注". 所以就想自己做一个网页来达到看盘的目的,一个只显示几个关键数字的网页肯定不会引起怀疑.有想法了,就开始实现吧. 准备工作: 1.数据来源 2.网页数据显示先帖出来源码,后面讲解 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
基于Vue实现tab栏切换内容不断实时刷新数据功能

先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l
使用ajax技术无刷新动态调用新浪股票实时数据

新浪的财金频道一直感觉做得很好.但由于最近网速慢的缘故,查看股票信息时网页老是打不开.这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面. <html> <head> <title>ajax test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <scri
基于d3.js实现实时刷新的折线图

先来看看效果图下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri
matplotlib实现数据实时刷新的示例代码

前言 matplotlib是python下非常好用的一个数据可视化套件,网上相关的教程也非常丰富,使用方便.本人需求一个根据实时数据刷新曲线的上位机软件,找了半天,基本上都是使用matplotlib的交互模式,我折腾半天还是没有实现想要的效果,但却通过另一种方法实现了想要的效果. 源码注释已经很充分,不多赘述,直接看源码. import matplotlib.pyplot as plt import numpy as np import threading import sys from ra
QT自定义QTextEdit实现大数据的实时刷新显示功能实例

目录前言一. 思路二.关键部分代码 1.缓存 2.滚动部分代码三.需要优化的地方总结前言最近使用QT中的QTextEdit控件,作为实时数据显示的UI,在一次写入超过多少k的时候循环写入则会卡顿,网上也没有什么好的解决方案,左思右想自己实现一个类似的demo.后期封装起来继承QWidget就可以在其他地方应用,直接上图: 主要功能介绍: 1.这里用一个6M多的文件加一个定时器100ms模拟实时数据,可以自定义保存多少数据,默认是保存10M数据: 2.行号的显示和隐藏: 3.右侧滚
利用Python 爬取股票实时数据详情

东方财富网地址如下: http://quote.eastmoney.com/center/gridlist.html#hs_a_board 我们通过点击该网站的下一页发现,网页内容有变化,但是网站的 URL 却不变,也就是说这里使用了 Ajax 技术,动态从服务器拉取数据,这种方式的好处是可以在不重新加载整幅网页的情况下更新部分数据,减轻网络负荷,加快页面加载速度. 我们通过 F12 来查看网络请求情况,可以很容易的发现,网页上的数据都是通过如下地址请求的 http://38.push2.eas
zTree实现节点修改的实时刷新功能

一.应用场景在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了. 二.项目实践比如要在test1234节点下新建子节点,首先要选中test1234节点,添加成功后,根据test1234结点的TID去后台请求对应子节点数据,实现动态刷新.删除节点类似. 三.代码实现 1.初始化时必须设置配置 <span style="font-size:14px;"> async:{ enable:true, url:"../admin/s
vue.js中使用echarts实现数据动态刷新功能

在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础.我们再设想一下, 如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据. 所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能: watch:{ option:function(newval
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)

一.pyqt5的UI中嵌入matplotlib的方法 1.导入模块导入模块比较简单,首先声明使用pyqt5,通过FigureCanvasQTAgg创建画布,可以将画布的图像显示到UI,相当于pyqt5的一个控件,后面的绘图就建立在这个画布上,然后把这个画布当中pyqt5的控件添加到pyqt5的UI上,其次要导入matplotlib.figure的Figure ,这里要注意的是matplotlib.figure中的Figure,不是matplotlib.pyplot模块中的Figure,要区分清

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

相关推荐

随机推荐