基於JavaScript建立即時股票行情展示
導言：
隨著金融市場的不斷發展，即時股票行情的展示對於投資者和交易員來說變得愈發重要。在現代化交易平台中，提供一個即時股票行情展示的功能是不可或缺的。本文將介紹如何使用JavaScript和一些相關的技術來建立一個簡單的即時股票行情展示的應用。
<!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樣式可以自行添加以美化頁面。
fetch("https://api.stock-api.com/real-time")
.then(response => response.json())
.then(data => {
// 处理返回的数据
})
.catch(error => {
console.error("获取股票行情数据出错：", error);
});在上述程式碼中，我們使用fetch函數傳送一個HTTP請求來取得股票行情數據，並使用.then方法處理傳回的資料。
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元素中。
// 更新股票行情数据并动态展示
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中文網其他相關文章！
