Bina paparan sebut harga saham masa nyata berdasarkan JavaScript
Pengenalan:
Dengan perkembangan berterusan pasaran kewangan, paparan sebut harga saham masa nyata menjadi semakin penting bagi pelabur dan pedagang. Dalam platform dagangan moden, adalah penting untuk menyediakan fungsi paparan harga saham masa nyata. Artikel ini akan memperkenalkan cara menggunakan JavaScript dan beberapa teknologi yang berkaitan untuk membina aplikasi paparan sebut harga saham masa nyata yang ringkas.
<!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>
Dalam contoh di atas, kami telah menggunakan tajuk dan tag senarai tidak tersusun untuk memaparkan sebut harga saham. Gaya CSS boleh ditambah sendiri untuk mencantikkan halaman.
fetch("https://api.stock-api.com/real-time") .then(response => response.json()) .then(data => { // 处理返回的数据 }) .catch(error => { console.error("获取股票行情数据出错:", error); });
Dalam kod di atas, kami menggunakan fungsi ambil untuk menghantar permintaan HTTP untuk mendapatkan data sebut harga saham, dan menggunakan kaedah .then untuk memproses data yang dikembalikan.
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); });
Dalam kod di atas, kami menggunakan fungsi getElementById untuk mendapatkan elemen ul yang memaparkan sebut harga saham, dan kemudian mencipta elemen li dengan menggelungkan melalui data stok dan menambahnya pada ul unsur.
// 更新股票行情数据并动态展示 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);
Dalam kod di atas, kami menggunakan fungsi setInterval untuk memanggil fungsi updateStockInfo setiap 5 saat untuk mengemas kini data sebut harga saham dan paparan halaman.
Ringkasan:
Melalui langkah di atas, kami menggunakan JavaScript dan beberapa teknologi berkaitan untuk membina aplikasi paparan sebut harga saham masa nyata yang ringkas. Dalam aplikasi praktikal, kami boleh menyesuaikan kaedah dan gaya paparan yang berbeza mengikut keperluan, dan kami juga boleh menambah beberapa fungsi interaktif, seperti mengklik pada sebut harga saham untuk tontonan yang mendalam. Saya harap artikel ini dapat memberi sedikit rujukan dan bantuan kepada pembaca untuk membina aplikasi paparan sebut harga saham masa nyata.
(bilangan perkataan: 800 patah perkataan)
Atas ialah kandungan terperinci Bina paparan sebut harga saham masa nyata berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!