Rumah >hujung hadapan web >tutorial js >Bina paparan sebut harga saham masa nyata berdasarkan JavaScript
Bina paparan sebut harga saham masa nyata berdasarkan JavaScript
- PHPzasal
- 2023-08-08 08:03:301435semak imbas
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.
- Persediaan
Sebelum anda mula, anda perlu menyediakan kerja berikut: - Rangka kerja halaman web berdasarkan HTML dan CSS
- API untuk data pasaran saham
- Persekitaran pengaturcaraan JavaScript dan perpustakaan yang sepadan
- Bina halaman web rangka kerja
Pertama, Kita perlu mencipta rangka kerja halaman web asas, termasuk kawasan yang memaparkan sebut harga saham dan gaya CSS yang sepadan. Berikut ialah contoh bingkai web mudah:
<!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.
- Dapatkan data pasaran saham
Seterusnya, kita perlu menggunakan API data pasaran saham untuk mendapatkan maklumat pasaran saham masa nyata. Di sini kami menganggap bahawa kami menggunakan API yang dipanggil "stock-api", yang boleh mengembalikan data dalam format JSON. Kita boleh menggunakan fungsi ambil dalam JavaScript untuk mendapatkan data ini.
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.
- Paparan dinamik sebut harga saham
Selepas mendapatkan data sebut harga saham, kami perlu memaparkannya secara dinamik pada halaman web. Berikut ialah contoh kod:
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.
- Kemas kini sebut harga saham dalam masa nyata
Untuk mengemas kini sebut harga saham dalam masa nyata, kami boleh menggunakan pemasa untuk kerap mendapatkan data sebut harga saham terkini dan mengemas kini paparan di halaman 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);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!