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 相关文章推荐
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
vue router demo详解
Oct 13 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
js数据类型检测总结
2018/08/05 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
解决Python使用列表副本的问题
2019/12/19 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
思想品德课教学反思
2014/02/10 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS