Erstellen Sie eine Echtzeit-Börsenkursanzeige basierend auf JavaScript
Einführung:
Mit der kontinuierlichen Entwicklung der Finanzmärkte ist die Anzeige von Echtzeit-Börsenkursen für Anleger und Händler immer wichtiger geworden. In einer modernen Handelsplattform ist es unerlässlich, eine Funktion zur Anzeige des Aktienkurses in Echtzeit bereitzustellen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript und einigen verwandten Technologien eine einfache Anwendung zur Anzeige von Börsenkursen in Echtzeit erstellen.
<!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>Im obigen Beispiel haben wir einen Titel und ein ungeordnetes Listen-Tag verwendet, um Aktienkurse anzuzeigen. Sie können CSS-Stile hinzufügen, um die Seite zu verschönern.
fetch("https://api.stock-api.com/real-time")
.then(response => response.json())
.then(data => {
// 处理返回的数据
})
.catch(error => {
console.error("获取股票行情数据出错：", error);
});Im obigen Code verwenden wir die Abruffunktion, um eine HTTP-Anfrage zum Abrufen von Aktienkursdaten zu senden, und verwenden die .then-Methode, um die zurückgegebenen Daten zu verarbeiten.
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);
});Im obigen Code verwenden wir die Funktion getElementById, um das ul-Element abzurufen, das den Aktienkurs anzeigt, und erstellen dann das li-Element, indem wir die Aktiendaten durchlaufen und es zur ul hinzufügen Element.
// 更新股票行情数据并动态展示
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);Im obigen Code verwenden wir die Funktion setInterval, um alle 5 Sekunden die Funktion updateStockInfo aufzurufen, um die Aktienkursdaten und die Seitenanzeige zu aktualisieren.
Zusammenfassung:
Durch die oben genannten Schritte haben wir JavaScript und einige verwandte Technologien verwendet, um eine einfache Anwendung zur Anzeige von Börsenkursen in Echtzeit zu erstellen. In praktischen Anwendungen können wir verschiedene Anzeigemethoden und -stile je nach Bedarf anpassen und auch einige interaktive Funktionen hinzufügen, z. B. das Klicken auf Aktienkurse für eine detaillierte Anzeige. Ich hoffe, dass dieser Artikel den Lesern Hinweise und Hilfe beim Erstellen von Anwendungen zur Anzeige von Aktienkursen in Echtzeit bieten kann.
(Wortzahl: 800 Wörter)
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Echtzeit-Börsenkursanzeige basierend auf JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
