广告
返回顶部
首页 > 资讯 > 前端开发 > html >js如何实现股票实时刷新数据
  • 735
分享到

js如何实现股票实时刷新数据

2024-04-02 19:04:59 735人浏览 薄情痞子
摘要

小编给大家分享一下js如何实现股票实时刷新数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!准备工作:1、数据来源2、网页数据显

小编给大家分享一下js如何实现股票实时刷新数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

准备工作:

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 ></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 ></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" ></div>
</body>
</html>

数据来源

如果不知道现有可用的数据源,就百度吧。百度搜索“股票数据接口”

搜到的结果如下,这是一个浪新博客里的,相信读者都能很容易的找到。

Sina股票数据接口

以大秦铁路(股票代码:601006)为例,如果要获取它的最新行情,只需访问浪新的股票数据

接口:http://hq.sinajs.cn/list=sh701006这个url会返回一串文本,例如:

var hq_str_sh701006="大秦铁路, 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如何实现股票实时刷新数据”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: js如何实现股票实时刷新数据

本文链接: https://www.lsjlt.com/news/66500.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js如何实现股票实时刷新数据
    小编给大家分享一下js如何实现股票实时刷新数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!准备工作:1、数据来源2、网页数据显...
    99+
    2022-10-19
  • 如何使用ajax技术无刷新动态调用新浪股票实时数据
    本篇内容介绍了“如何使用ajax技术无刷新动态调用新浪股票实时数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有...
    99+
    2022-10-19
  • js如何实现防刷新的倒计时
    这篇文章主要为大家展示了“js如何实现防刷新的倒计时”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何实现防刷新的倒计时”这篇文章吧。最近在维护考试系统,在...
    99+
    2022-10-19
  • 利用Python 爬取股票实时数据详情
    东方财富网地址如下: http://quote.eastmoney.com/center/gridlist.html#hs_a_board 我们通过点击该网站的下一页发现,网页内容...
    99+
    2022-11-11
  • java实时刷新数据怎么实现
    在Java中实现实时刷新数据可以使用以下几种方法:1. 轮询:在程序中使用一个循环,定期地从数据源中获取最新的数据。可以使用定时任务...
    99+
    2023-08-17
    java
  • php实时刷新数据怎么实现
    要实现PHP的实时刷新数据,可以使用以下方法:1. Ajax轮询:通过JavaScript定时向服务器发送请求,获取最新的数据,并更...
    99+
    2023-09-06
    php
  • winform窗体数据实时刷新怎么实现
    要实现WinForm窗体数据的实时刷新,可以使用定时器控件或者后台线程来更新数据。 使用定时器控件: a. 在窗体上添加一个Ti...
    99+
    2023-10-26
    winform
  • python如何实现股票历史数据可视化示例
    这篇文章主要介绍python如何实现股票历史数据可视化示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!投资有风险,选择需谨慎。 股票交易数据分析可直观股市走向,对于如何把握股票行情,快速解读股票交易数据有...
    99+
    2023-06-15
  • 如何使用Python实现股票数据分析的可视化
    这篇文章主要为大家展示了“如何使用Python实现股票数据分析的可视化”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用Python实现股票数据分析的可视化”这篇文章吧。一、简介我们知道在购...
    99+
    2023-06-22
  • Python中使用dwebsocket实现后端数据实时刷新
    执行定时任务的时候,我们需要了解执行百分比或者实时数据返回,这时候可以采用的方法 1.ajax请求后端服务器,然后前端页面局部渲染获取百分比 2.使用webscoket进行长连接交流...
    99+
    2023-05-18
    Python dwebsocket数据刷新 Python后端数据实时刷新
  • 基于Python实现股票数据分析的可视化
    目录一、简介二、代码1、主文件2、数据库使用文件3、ui设计模块4、数据处理模块三、数据样例的展示四、效果展示一、简介 我们知道在购买股票的时候,可以使用历史数据来对当前的股票的走势...
    99+
    2022-11-12
  • winform窗体数据怎么实时刷新
    在WinForm窗体中,可以使用定时器(Timer)来实现数据的实时刷新。 首先,添加一个Timer控件到窗体上,设置其Interv...
    99+
    2023-10-27
    winform
  • 纯JS如何实现AJAX局部刷新功能
    小编给大家分享一下纯JS如何实现AJAX局部刷新功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!js有什么特点1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、...
    99+
    2023-06-08
  • AngularJS如何实现页面定时刷新
    这篇文章主要介绍了AngularJS如何实现页面定时刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。有时我们在前端可能会有这样的需求:1、...
    99+
    2022-10-19
  • python实现股票历史数据可视化分析案例
    目录1 数据预处理1.1 股票历史数据csv文件读取1.2 关键数据——在csv文件中选择性提取“列”1.3 数据类型转换1.4 数据按列提取并累加性存入列表2 pyecharts实现数据可视化2.1 导入库2.2 ...
    99+
    2022-06-03
    python股票数据可视化 python 股票可视化
  • 实时获取股票数据的android app应用程序源码分享
    最近学习Android应用开发,不知道写一个什么样的程序来练练手,正好最近股票很火,就一个App来实时获取股票数据,取名为Mystock。使用开发工具Android Studi...
    99+
    2022-06-06
    程序 数据 股票 源码分享 app 源码 Android
  • Python如何获取实时股票信息的方法示例
    如何获取实时股票信息 股票信息的接口有很多,之前大家常用的是新浪的,但在年初的时候,新浪的接口突然不能使用,给大家造成了很大的困扰,为此网上也有很多教程教大家如何从新浪获取数据,跟着...
    99+
    2022-11-13
  • QT如何自定义QTextEdit实现大数据的实时刷新显示功能
    这篇“QT如何自定义QTextEdit实现大数据的实时刷新显示功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“QT如何自定...
    99+
    2023-06-30
  • php实时刷新数据的方法是什么
    PHP是一种服务器端编程语言,它本身无法实现实时刷新数据。然而,可以通过一些其他的技术来实现实时刷新数据,例如:1. JavaScr...
    99+
    2023-08-17
    php
  • jquery php如何实现实时数据更新
    本文操作环境:Windows7系统、PHP7.1版、Dell G3电脑。jquery php如何实现实时数据更新php+jQuery ajax实现的实时刷新显示数据功能示例具体如下:创建数据表:demo-- -- 表的结构 `demo` -...
    99+
    2019-01-12
    jquery php
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作