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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
浅析JS运动
Dec 28 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
python机器学习之随机森林(七)
2018/03/26 Python
python如何将图片转换为字符图片
2020/08/19 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
普通员工辞职信
2014/01/17 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
委托书的写法
2014/09/16 职场文书
房屋出租委托书格式
2014/09/23 职场文书
质检员岗位职责范本
2015/04/07 职场文书
羊脂球读书笔记
2015/06/30 职场文书
党章学习心得体会2016
2016/01/14 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL