Maison > Article > interface Web > Créez un affichage des cotations boursières en temps réel basé sur JavaScript

Créez un affichage des cotations boursières en temps réel basé sur JavaScript

PHPzoriginal: 2023-08-08 08:03:301340parcourir

Introduction :
Avec le développement continu des marchés financiers, l'affichage des cotations boursières en temps réel est devenu de plus en plus important pour les investisseurs et les traders. Dans une plateforme de trading moderne, il est essentiel de proposer une fonction d’affichage du cours des actions en temps réel. Cet article explique comment utiliser JavaScript et certaines technologies associées pour créer une application simple d'affichage des cotations boursières en temps réel.

Préparation
Avant de commencer, vous devez préparer les travaux suivants :
Un framework de page web basé sur HTML et CSS
Une API pour les données boursières
Environnement de programmation JavaScript et bibliothèques correspondantes
Construire une page web framework
Tout d'abord, nous devons créer un cadre de page Web de base, comprenant une zone qui affiche les cotations boursières et les styles CSS correspondants. Voici un exemple de cadre Web simple :

<!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>

Dans l'exemple ci-dessus, nous avons utilisé un titre et une balise de liste non ordonnée pour afficher les cotations boursières. Les styles CSS peuvent être ajoutés par vous-même pour embellir la page.

Obtenir des données boursières
Ensuite, nous devons utiliser une API de données boursières pour obtenir des informations boursières en temps réel. Ici, nous supposons que nous utilisons une API appelée « stock-api », qui peut renvoyer des données au format JSON. Nous pouvons utiliser la fonction fetch en JavaScript pour obtenir ces données.

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

Dans le code ci-dessus, nous utilisons la fonction fetch pour envoyer une requête HTTP afin d'obtenir les données de cotation boursière, et utilisons la méthode .then pour traiter les données renvoyées.

Affichage dynamique des cotations boursières
Après avoir obtenu les données des cotations boursières, nous devons les afficher dynamiquement sur la page Web. Voici un exemple de code :

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);
  });

Dans le code ci-dessus, nous utilisons la fonction getElementById pour obtenir l'élément ul qui affiche la cotation boursière, puis créons l'élément li en parcourant les données boursières et en l'ajoutant à l'élément ul. élément.

Mettre à jour les cotations boursières en temps réel
Pour mettre à jour les cotations boursières en temps réel, nous pouvons utiliser une minuterie pour obtenir régulièrement les dernières données de cotations boursières et mettre à jour l'affichage sur la page 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);

Dans le code ci-dessus, nous utilisons la fonction setInterval pour appeler la fonction updateStockInfo toutes les 5 secondes afin de mettre à jour les données de cotation boursière et l'affichage de la page.

Résumé :
À travers les étapes ci-dessus, nous avons utilisé JavaScript et certaines technologies associées pour créer une application simple d'affichage des cotations boursières en temps réel. Dans les applications pratiques, nous pouvons personnaliser différentes méthodes et styles d'affichage en fonction des besoins, et nous pouvons également ajouter des fonctions interactives, comme cliquer sur les cotations boursières pour une visualisation approfondie. J'espère que cet article pourra fournir des références et aider les lecteurs à créer des applications d'affichage des cotations boursières en temps réel.

(nombre de mots : 800 mots)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels sont les formats de données de JSON ?Article suivant：Quels sont les formats de données de JSON ?

Articles Liés

Voir plus