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

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

准备工作：

1、数据来源

2、网页数据显示

先帖出来源码，后面讲解

<!--

说明：股票看盘

作者：黑桃A

时间：2014-04-14

-->

<!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，这样就搞定了

第一次写这样的博客，当练手了，以后每天坚持写点东西

出处：http://www.lxway.com/240649562.htm

js实现股票实时刷新数据的更多相关文章

  1. tab栏切换，内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

  2. 手机端原生js实现下拉刷新数据

    HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...

  3. gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块

    1.压缩tinypng图片   gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...

  4. Android TabHost切换选项卡实现数据实时刷新

    手机界面大小有限,使用TabHost可以达到在一个Activity中放入多个容器(界面)的效果.但存在一个问题是,当数据信息在一个容器(界面)中有所改变时,需要在用户切换选项卡到其他容器(界面)的时候 ...

  5. websocket+订阅发布者模式模拟实现股票价格实时刷新

    1.新建文件夹 2.文件夹中新建index.html 和 index.js index.html <!DOCTYPE html> <html lang="en"& ...

  6. flask处理数据，页面实时刷新展示

    背景: 后端 flask(python)处理数据,页面实时刷新,类似于打包页面的动态展示,展示效果如图: 代码如下: 前端主要使用以下循环处理, 2--- 2秒刷新一次 {% if 0 == stop ...

  7. js获取当前时间并实时刷新

    效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...

  8. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  9. 超酷的实时颜色数据跟踪javascript类库 - Tracking.js

    来源:GBin1.com 今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据. 这些数据包括了颜色或者是人, 这 ...

随机推荐

  1. centOS 7中上网以及网卡的一些设置

    在VMWare中安装LinuxOS是个非经常见的事情. 可是,关于虚拟机的上网问题.想在这里总结一下,里面还有不懂的问题.希望能够得到前辈的解惑. 一.VMWare网卡的设置的三种选项: Bridge ...

  2. 一文了解ConfigurationConditon接口

    ConfigurationCondition 接口说明 @Conditional 和 Condition ​ 在了解ConfigurationCondition 接口之前,先通过一个示例来了解一下@C ...

  3. 玩转 eclipse：[2]代码重构

    Java 程序重构的目标就是进行全系统程序代码变更, 使得工程更符合常用设计思想,它不但不会影响程序的行为 ,反而使程序的结构更为清晰合理. Eclipse 提供一系列非常高效并且有易于重构程序代码的 ...

  4. Unity3D 动态地创建识别图

    前面介绍了EasyAR的单图识别,它是提前在Unity设置好图片路径的,那么如果我们的图片是存储在服务器上的,那么我们肯定不能直接把服务的图片地址填上去了.这个时候我们可以动态地创建识别图.步骤如下: ...

  5. pjax简单实例

    ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中.pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏, ...

  6. 【BZOJ1115】[POI2009]石子游戏Kam 阶梯博弈

    [BZOJ1115][POI2009]石子游戏Kam Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要 ...

  7. Redis实现主从复制(转)

    一.Redis的Replication: 这里首先需要说明的是,在Redis中配置Master-Slave模式真是太简单了.相信在阅读完这篇Blog之后你也可以轻松做到.这里我们还是先列出一些理论性的 ...

  8. 九度OJ 1048：判断三角形类型 （基础题）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6794 解决:3361 题目描述: 给定三角形的三条边,a,b,c.判断该三角形类型. 输入: 测试数据有多组,每组输入三角形的三条边. 输 ...

  9. apache vhosts 虚拟主机设置

    编辑vhosts文件:/alidata/server/httpd-2.4.10/conf/extra/httpd-vhosts.conf <VirtualHost *:80> <Lo ...

  10. 洛谷3243 [HNOI2015]菜肴制作

    题目戳这里 Solution 错误的想法:正向建图,然后从入度为0的点选出最小u的开始输出,然后找出u连接的点v,并把v的度数减一,再次把入度为0的点加入小根堆,这样显然有错,因为只能局部保证最小,后 ...