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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
JS中作用域以及变量范围分析
Jul 18 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数字转汉字代码(算法)
2011/10/08 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python之Character string(实例讲解)
2017/09/25 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
transform python环境快速配置方法
2018/09/27 Python
python实现126邮箱发送邮件
2020/05/20 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Python代码注释规范代码实例解析
2020/08/14 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
《童年》教学反思
2014/02/18 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
2015年化验室工作总结
2015/04/23 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
创业计划书之美甲店
2019/09/20 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers