上证指数
-
最新值：
-
涨跌幅：
-
最高值：
-
最低值：
-
成交量：
-
涨跌停家数：
深证成指
-
最新值：
-
涨跌幅：
-
最高值：
-
最低值：
-
成交量：
-
涨跌停家数：
沪深300指数
-
最新值：
-
涨跌幅：
-
最高值：
-
最低值：
-
成交量：
-
涨跌停家数：
JavaScript 脚本（script.js）：
javascript
// 获取 DOM 元素
const szChart = document.getElementById('chart1');
const szData = document.querySelectorAll('.sz-data');
const szLatest = document.getElementById('sz-latest');
const szChange = document.getElementById('sz-change');
const szMax = document.getElementById('sz-max');
const szMin = document.getElementById('sz-min');
const szVolume = document.getElementById('sz-volume');
const szSusplimitNum = document.getElementById('sz-susplimit-num');const dzChart = document.getElementById('chart2');
const dzData = document.querySelectorAll('.dz-data');
const dzLatest = document.getElementById('dz-latest');
const dzChange = document.getElementById('dz-change');
const dzMax = document.getElementById('dz-max');
const dzMin = document.getElementById('dz-min');
const dzVolume = document.getElementById('dz-volume');
const dzSusplimitNum = document.getElementById('dz-susplimit-num');const hsChart = document.getElementById('chart3');
const hsData = document.querySelectorAll('.hs-data');
const hsLatest = document.getElementById('hs-latest');
const hsChange = document.getElementById('hs-change');
const hsMax = document.getElementById('hs-max');
consthsMin = document.getElementById('hs-min');
const hsVolume = document.getElementById('hs-volume');
const hsSusplimitNum = document.getElementById('hs-susplimit-num');// 创建图表
const szCtx = szChart.getContext('2d');
const dzCtx = dzChart.getContext('2d');
const hsCtx = hsChart.getContext('2d');const szMyChart = new Chart(szCtx, getConfig('上证指数'));
const dzMyChart = new Chart(dzCtx, getConfig('深证成指'));
const hsMyChart = new Chart(hsCtx, getConfig('沪深300指数'));// 定期更新数据
setInterval(async () => {const data = await getStockData();// 更新上证指数szLatest.innerText = data.stockList[0].TC;szChange.innerText = data.stockList[0].TCHG + '%';szMax.innerText = data.stockList[0].HIGH;szMin.innerText = data.stockList[0].LOW;szVolume.innerText = data.stockList[0].TVOLUME;szSusplimitNum.innerText = data.stockList[0].SUSP_LIMIT_NUM;szMyChart.data.datasets[0].data[0] = data.stockList[0].TC;szMyChart.update();// 更新深证成指dzLatest.innerText = data.stockList[1].TC;dzChange.innerText = data.stockList[1].TCHG + '%';dzMax.innerText = data.stockList[1].HIGH;dzMin.innerText = data.stockList[1].LOW;dzVolume.innerText = data.stockList[1].TVOLUME;dzSusplimitNum.innerText = data.stockList[1].SUSP_LIMIT_NUM;dzMyChart.data.datasets[0].data[0] = data.stockList[1].TC;dzMyChart.update();// 更新沪深300指数hsLatest.innerText = data.stockList[2].TC;hsChange.innerText = data.stockList[2].TCHG + '%';hsMax.innerText = data.stockList[2].HIGH;hsMin.innerText = data.stockList[2].LOW;hsVolume.innerText = data.stockList[2].TVOLUME;hsSusplimitNum.innerText = data.stockList[2].SUSP_LIMIT_NUM;hsMyChart.data.datasets[0].data[0] = data.stockList[2].TC;hsMyChart.update();}, 3000);// 获取图表配置
function getConfig(name) {return {type: 'line',data: {labels: ['最新值'],datasets: [{label: name,data: [0],borderColor: 'rgb(255, 99, 132)',borderWidth: 2}]},options: {scales: {y: {beginAtZero: true}}}};
}// 从网络获取股票数据
async function getStockData() {const res = await fetch('https://stock.gtimg.cn/data/index.php?appn=detail&action=index&c=sh000001,sz399001,sh000300');const data = await res.json();return data;
}
