js實現股票實時刷新數據

時間 2020-09-20

標籤實現股票實時刷新數據欄目 JavaScript 简体版

原文原文鏈接

近來學習炒股，免不了上班時間看盤，總不能光明正大的用電腦看行情，一直盯着手機影響也很差，容易引發「關注」。javascript

因此就想本身作一個網頁來達到看盤的目的，一個只顯示幾個關鍵數字的網頁確定不會引發懷疑。有想法了，就開始實現吧。html

準備工做：java

一、數據來源jquery

二、網頁數據顯示ajax

先帖出來源碼，後面講解chrome

<!--
說明：股票看盤
做者：黑桃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>

數據來源瀏覽器

若是不知道現有可用的數據源，就百度吧。百度搜索「股票數據接口」網絡

搜到的結果以下，這是一個浪新博客裏的，相信讀者都能很容易的找到。dom

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