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


Posted in Javascript onMay 14, 2017

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

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

准备工作:

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所示

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实现股票实时刷新数据案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 #Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 #Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 #Javascript
web.js.字符串与正则表达式操作
May 13 #Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 #Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 #jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 #jQuery
You might like
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
PHP时间类完整代码实例
2021/02/26 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
python实现的一个火车票转让信息采集器
2014/07/09 Python
深入理解Python变量与常量
2016/06/02 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Pytorch to(device)用法
2020/01/08 Python
python 回溯法模板详解
2020/02/26 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Python如何实现的二分查找算法
2020/05/27 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
人事专员岗位职责
2013/11/20 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
节约用水倡议书
2014/04/16 职场文书
学生保证书
2015/01/16 职场文书
初中教师个人总结
2015/02/10 职场文书
个人年终总结开头
2015/03/06 职场文书
成绩单家长意见
2015/06/03 职场文书
计算机教师工作总结
2015/08/13 职场文书
python使用glob检索文件的操作
2021/05/20 Python
python调试工具Birdseye的使用教程
2021/05/25 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL