JavaScript に基づいてリアルタイムの株価表示を構築する-jsチュートリアル-php.cn

JavaScript に基づいてリアルタイムの株価表示を構築する

PHPz

リリース： 2023-08-08 08:03:30

オリジナル

1387 人が閲覧しました

JavaScript に基づいてリアルタイムの株価表示を構築する

JavaScript に基づいたリアルタイム株価表示の構築

はじめに:
金融市場の継続的な発展に伴い、リアルタイム株価表示は投資家やトレーダーにとって重要スピーキングはますます重要になっています。現代の取引プラットフォームでは、リアルタイムの株価表示機能を提供することが不可欠です。この記事では、JavaScript といくつかの関連テクノロジを使用して、シンプルなリアルタイム株価表示アプリケーションを構築する方法を紹介します。

準備
開始する前に、次の作業を準備する必要があります:
HTML および CSS に基づく Web ページフレームワーク
株式市場用の APIデータ
JavaScript プログラミング環境と対応するライブラリ
Web ページフレームワークの構築
まず、株価と対応する CSS スタイルを表示する領域を含む、基本的な Web ページフレームワークを作成する必要があります。。以下は、Web ページフレームの簡単な例です。

<!DOCTYPE html>
<html>
  <head>
    <title>实时股票行情展示</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="stock-info">
      <h1>股票行情</h1>
      <ul id="stock-list"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

ログイン後にコピー

上の例では、タイトルと順序なしリストタグを使用して株価を表示しています。 CSS スタイルを自分で追加して、ページを美しくすることができます。

株式市場データの取得
次に、株式市場データ API を使用して、リアルタイムの株式市場情報を取得する必要があります。ここでは、JSON 形式でデータを返すことができる「stock-api」という API を使用していると仮定します。 JavaScript の fetch 関数を使用して、このデータを取得できます。

fetch("https://api.stock-api.com/real-time")
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    console.error("获取股票行情数据出错：", error);
  });

ログイン後にコピー

上記のコードでは、fetch 関数を使用して HTTP リクエストを送信して株価データを取得し、.then メソッドを使用して返されたデータを処理します。

株価の動的な表示
株価データを取得した後、それを Web ページ上に動的に表示する必要があります。以下はサンプルコードです:

const stockListElement = document.getElementById("stock-list");

function displayStockInfo(stockData) {
  stockListElement.innerHTML = ""; // 清空原有的数据

  stockData.forEach(stock => {
    const liElement = document.createElement("li");
    liElement.innerHTML = `${stock.symbol}: ${stock.price}`;

    stockListElement.appendChild(liElement);
  });
}

// 在fetch成功后调用displayStockInfo函数
fetch("https://api.stock-api.com/real-time")
  .then(response => response.json())
  .then(data => {
    displayStockInfo(data);
  })
  .catch(error => {
    console.error("获取股票行情数据出错：", error);
  });

ログイン後にコピー

上記のコードでは、getElementById 関数を使用して株価を表示する ul 要素を取得し、株価データを走査して li 要素を作成します。それを ul 要素に追加します。

株価をリアルタイムで更新する
株価をリアルタイムで更新するには、タイマーを使用して最新の株価データを定期的に取得し、Web ページ上の表示を更新します。

// 更新股票行情数据并动态展示
function updateStockInfo() {
  fetch("https://api.stock-api.com/real-time")
    .then(response => response.json())
    .then(data => {
      displayStockInfo(data);
    })
    .catch(error => {
      console.error("获取股票行情数据出错：", error);
    });
}

// 每5秒钟更新一次股票行情数据
setInterval(updateStockInfo, 5000);

ログイン後にコピー

上記のコードでは、setInterval 関数を使用して 5 秒ごとに updateStockInfo 関数を呼び出し、株式市場データとページ表示を更新します。

概要:
上記の手順を通じて、JavaScript といくつかの関連テクノロジを使用して、シンプルなリアルタイム株価表示アプリケーションを構築しました。実際のアプリケーションでは、ニーズに応じてさまざまな表示方法やスタイルをカスタマイズでき、株価をクリックして詳細を表示するなどのインタラクティブな機能を追加することもできます。この記事が、読者がリアルタイム株価表示アプリケーションを構築する際の参考と手助けになれば幸いです。

（ワード数：800ワード）

以上がJavaScript に基づいてリアルタイムの株価表示を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。