js實現(xiàn)股票實時刷新數(shù)據(jù)案例
近來學(xué)習(xí)炒股,免不了上班時間看盤,總不能光明正大的用電腦看行情,一直盯著手機(jī)影響也不好,容易引起“關(guān)注”。
所以就想自己做一個網(wǎng)頁來達(dá)到看盤的目的,一個只顯示幾個關(guān)鍵數(shù)字的網(wǎng)頁肯定不會引起懷疑。有想法了,就開始實現(xiàn)吧。
準(zhǔn)備工作:
1、數(shù)據(jù)來源
2、網(wǎng)頁數(shù)據(jù)顯示
先帖出來源碼,后面講解
<!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秒 }); //獲取新數(shù)據(jù) 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){ //加載腳本并執(zhí)行 }); } //刷新顯示 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參數(shù) 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>
數(shù)據(jù)來源
如果不知道現(xiàn)有可用的數(shù)據(jù)源,就百度吧。百度搜索“股票數(shù)據(jù)接口”
搜到的結(jié)果如下,這是一個浪新博客里的,相信讀者都能很容易的找到。
Sina股票數(shù)據(jù)接口
以大秦鐵路(股票代碼:601006)為例,如果要獲取它的最新行情,只需訪問浪新的股票數(shù)據(jù)
接口: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";
這里用我自己熟悉的一個“接口”,我經(jīng)常在和訊網(wǎng)上看行情,財經(jīng)新聞等,知道它有一個可用的數(shù)據(jù)來源。這里還是詳細(xì)點說明一下我是怎么發(fā)現(xiàn)“接口”的。
①在瀏覽器里打開一只個股的頁面,如http://stockdata.stock.hexun.com/gghq_600050.shtml。然后打開瀏覽器的開發(fā)工具,我用的chrome,火狐里有firebug也挺好。切換到開發(fā)工具的“網(wǎng)絡(luò)”標(biāo)簽,觀察一下,很容易就能找到隔幾秒,就會加載一個js,如圖1所示
圖1
②鏈接地址 flashquote.stock.hexun.com/Stock_Combo.ASPX?mc=1_600050&dt=MX,DL&t=0.9482741139363497
就是這樣一個連接,在瀏覽器里打開,可以看到如下的內(nèi)容
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腳本,執(zhí)行refreshData方法,其他就是這個方法的參數(shù)了。參數(shù)一看就明白了,正是股票的實時盤口數(shù)據(jù)。
網(wǎng)頁數(shù)據(jù)顯示
數(shù)據(jù)來源已經(jīng)有了,開始第二步吧。做一個網(wǎng)頁來加載這些數(shù)據(jù)。做js簡單的就是用jquery吧, 一個很優(yōu)秀的js庫。
這一步比較簡單,用jquery里的ajax方法加載數(shù)據(jù),顯示。
加載方法 $.getScript。因為原數(shù)據(jù)里有個refreshData方法,加載完成后會自動執(zhí)行的,所以我的代碼里也聲明了一個同名方法在這里處理就行了。refreshData里把參數(shù),和參數(shù)對應(yīng)的內(nèi)容顯示到div里,怎么樣都行,只要能在頁面上看到。
setInterval用這個方法,讓頁面自動刷新,N秒鐘執(zhí)行一次。
getQueryString 這個方法是獲取頁面參數(shù)的,我們不可能只看一只股票,要看別的股票就要改代碼,雖然不難,但用參數(shù)更簡單,現(xiàn)在想看哪只股票,只要在頁面url后添加參數(shù)demo.html?c=000777,這樣就搞定了
以上這篇js實現(xiàn)股票實時刷新數(shù)據(jù)案例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript精確統(tǒng)計網(wǎng)站訪問量實例代碼
網(wǎng)站一般都有訪問量統(tǒng)計工具,比較高效實用的工具多種多樣,這篇文章主要介紹了javascript精確統(tǒng)計網(wǎng)站訪問量實例代碼,感興趣的小伙伴們可以參考一下2015-12-12JavaScript刪除數(shù)組中指定元素5種方法例子
這篇文章主要給大家介紹了關(guān)于JavaScript刪除數(shù)組中指定元素5種方法,在最近的項目中,有用到j(luò)s對數(shù)組的操作,所以這里總結(jié)一下,需要的朋友可以參考下2023-07-07JavaScript判斷一個字符串是否包含指定子字符串的方法
這篇文章主要介紹了JavaScript判斷一個字符串是否包含指定子字符串的方法,實例分析了javascript字符串操作的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03微信小程序使用wx.request請求服務(wù)器json數(shù)據(jù)并渲染到頁面操作示例
這篇文章主要介紹了微信小程序使用wx.request請求服務(wù)器json數(shù)據(jù)并渲染到頁面操作,結(jié)合實例形式分析了微信小程序使用wx.request發(fā)送網(wǎng)絡(luò)請求及返回結(jié)果渲染到wxml界面相關(guān)操作技巧,需要的朋友可以參考下2019-03-03JavaScript返回0-1之間隨機(jī)數(shù)的方法
這篇文章主要介紹了JavaScript返回0-1之間隨機(jī)數(shù)的方法,涉及javascript中Math對象random方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04