千千块模板 | 思源笔记实时查看股票数据

五档实时更新版

自定义 js 代码
功能说明:
代码用户配置区
1.将你的股票代码输入用户配置区(支持多个股票数据实时更新)
2.可以设置数据自动更新的间隔
注意代码前要写上 sh 为上海 sz 为深圳 例如 sh600519 这样才算完整的股票代码
如果不知道是哪的话
https://stockapp.finance.qq.com/mstats/ 搜一下股票代码,然后网页的网址就会显示
例如 https://gu.qq.com/sz000858/gp 则股票代码为 sz000858
// --- 样式设置 ---
// 给整个块容器一些基本样式
this.style.backgroundColor = '#f8f9fa';
this.style.padding = '8px';
this.style.borderRadius = '8px';
this.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
this.style.border = '1px solid #dee2e6';
// --- 用户配置区 ---
// 1. 在下面的数组中添加您想关注的股票代码
const stockCodes = [
'sz000858', // 五粮液
'sh600519', // 贵州茅台
'sz300750', // 宁德时代
];
// 2. 设置数据自动更新的间隔(单位:秒)
// 设置为 0 或负数则不自动更新
const refreshIntervalSeconds = 3;
// --- 数据获取与渲染 ---
// 先清空块内容,准备初始化
this.innerHTML = '';
// 遍历配置的股票代码,为每只股票创建占位容器
stockCodes.forEach((stockCode, index) => {
const stockElement = document.createElement('div');
stockElement.id = `stock-container-${stockCode}`;
stockElement.style.padding = '12px 16px'; // 调整内边距
if (index < stockCodes.length - 1) {
stockElement.style.borderBottom = '1px solid #e9ecef';
}
stockElement.innerHTML = `<div style="color: #6c757d; font-size: 0.9em;">正在加载 ${stockCode}...</div>`;
this.appendChild(stockElement);
});
// 定义一个函数,用于更新单个股票的数据
const updateStockData = async (stockCode) => {
const stockElement = this.querySelector(`#stock-container-${stockCode}`);
if (!stockElement) return;
const url = `http://qt.gtimg.cn/q=${stockCode}`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`网络服务错误 (${response.status})`);
const buffer = await response.arrayBuffer();
const decoder = new TextDecoder('gbk');
const textData = decoder.decode(buffer);
const parts = textData.split('~');
if (parts.length < 46) throw new Error(`无效的代码或API响应不完整`);
// --- 提取所有详细信息 ---
const stockName = parts[1];
const currentPrice = parseFloat(parts[3]).toFixed(2);
const prevClose = parseFloat(parts[4]).toFixed(2);
const openPrice = parseFloat(parts[5]).toFixed(2);
const priceChange = parseFloat(parts[31]).toFixed(2);
const percentChange = parseFloat(parts[32]).toFixed(2);
const highPrice = parseFloat(parts[33]).toFixed(2);
const lowPrice = parseFloat(parts[34]).toFixed(2);
const volume = (parseFloat(parts[6]) / 10000).toFixed(2); // 万手
const amount = (parseFloat(parts[37]) / 10000).toFixed(2); // 亿元
const turnover = parseFloat(parts[38]).toFixed(2) + '%';
const peRatio = parseFloat(parts[39]).toFixed(2);
const amplitude = parseFloat(parts[43]).toFixed(2) + '%';
const marketCap = parseFloat(parts[45]).toFixed(2) + '亿';
let color = '#343a40';
if (priceChange > 0) color = '#dc3545';
else if (priceChange < 0) color = '#28a745';
// --- 生成全新的紧凑型HTML布局 ---
const stockHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<!-- 左侧: 名称, 价格, 涨跌 -->
<div style="flex-grow: 1; min-width: 0;">
<div style="display: flex; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<h3 style="margin: 0; font-size: 1.15em; color: #212529;">${stockName}</h3>
<p style="margin: 0 0 0 8px; color: #6c757d; font-size: 0.85em;">${stockCode.toUpperCase()}</p>
</div>
<div style="text-align: left; margin-top: 4px;">
<span style="font-size: 2em; font-weight: 500; color: ${color};">${currentPrice}</span>
<span style="margin-left: 10px; font-size: 1em; color: ${color};">
<span>${priceChange > 0 ? '+' : ''}${priceChange}</span>
<span style="margin-left: 5px;">(${priceChange > 0 ? '+' : ''}${percentChange}%)</span>
</span>
</div>
</div>
<!-- 右侧: 其他所有详细信息 -->
<div style="display: grid; grid-template-columns: repeat(2, auto); gap: 4px 14px; font-size: 0.8em; color: #495057; text-align: left; margin-left: 16px;">
<span><strong>今开:</strong> ${openPrice}</span>
<span><strong>昨收:</strong> ${prevClose}</span>
<span style="color: #c82333;"><strong>最高:</strong> ${highPrice}</span>
<span style="color: #218838;"><strong>最低:</strong> ${lowPrice}</span>
<span><strong>换手:</strong> ${turnover}</span>
<span><strong>振幅:</strong> ${amplitude}</span>
<span><strong>成交额:</strong> ${amount}亿</span>
<span><strong>总市值:</strong> ${marketCap}</span>
</div>
</div>
`;
stockElement.innerHTML = stockHTML;
} catch (error) {
stockElement.innerHTML = `
<div style="color: #d9534f; padding: 12px 0; font-size: 0.9em;">
<strong>${stockCode.toUpperCase()} 加载失败:</strong> ${error.message}
</div>
`;
console.error(`Stock block error for ${stockCode}:`, error);
}
};
// 定义一个函数来触发所有股票的更新
const fetchAllStocks = () => {
stockCodes.forEach(updateStockData);
};
// 1. 立即执行一次,加载初始数据
fetchAllStocks();
// 2. 如果设置了刷新间隔,则启动定时器
if (refreshIntervalSeconds > 0) {
// 在定时器句柄前加一个简单的检查,防止重复创建
if (!this.stockUpdateTimer) {
this.stockUpdateTimer = setInterval(fetchAllStocks, refreshIntervalSeconds * 1000);
}
}
五档实时更新版
// --- 样式设置 ---
// 给整个块容器一些基本样式
this.style.backgroundColor = '#f8f9fa';
this.style.padding = '8px';
this.style.borderRadius = '8px';
this.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
this.style.border = '1px solid #dee2e6';
// --- 用户配置区 ---
// 1. 在下面的数组中添加您想关注的股票代码
const stockCodes = [
'sz000858', // 五粮液
'sh600519', // 贵州茅台
'sz300750', // 宁德时代
];
// 2. 设置数据自动更新的间隔(单位:秒)
// 设置为 0 或负数则不自动更新
const refreshIntervalSeconds = 3;
// --- 数据获取与渲染 ---
// 先清空块内容,准备初始化
this.innerHTML = '';
// 遍历配置的股票代码,为每只股票创建占位容器
stockCodes.forEach((stockCode, index) => {
const stockElement = document.createElement('div');
stockElement.id = `stock-container-${stockCode}`;
stockElement.style.padding = '12px 16px';
if (index < stockCodes.length - 1) {
stockElement.style.borderBottom = '1px solid #e9ecef';
}
stockElement.innerHTML = `<div style="color: #6c757d; font-size: 0.9em;">正在加载 ${stockCode}...</div>`;
this.appendChild(stockElement);
});
// 定义一个函数,用于更新单个股票的数据
const updateStockData = async (stockCode) => {
const stockElement = this.querySelector(`#stock-container-${stockCode}`);
if (!stockElement) return;
const url = `http://qt.gtimg.cn/q=${stockCode}`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`网络服务错误 (${response.status})`);
const buffer = await response.arrayBuffer();
const decoder = new TextDecoder('gbk');
const textData = decoder.decode(buffer);
const parts = textData.split('~');
if (parts.length < 50) throw new Error(`无效的代码或API响应不完整`);
// --- 提取核心信息 ---
const stockName = parts[1];
const currentPrice = parseFloat(parts[3]).toFixed(2);
const prevClose = parseFloat(parts[4]).toFixed(2);
const openPrice = parseFloat(parts[5]).toFixed(2);
const volume = (parseInt(parts[6]) / 10000).toFixed(1); // 万手
const time = parts[30];
const priceChange = parseFloat(parts[31]).toFixed(2);
const percentChange = parseFloat(parts[32]).toFixed(2);
const highPrice = parseFloat(parts[33]).toFixed(2);
const lowPrice = parseFloat(parts[34]).toFixed(2);
const amount = (parseFloat(parts[37]) / 10000).toFixed(2); // 亿元
const turnover = parseFloat(parts[38]).toFixed(2) + '%';
const peRatio = parseFloat(parts[39]).toFixed(2);
const amplitude = parseFloat(parts[43]).toFixed(2) + '%';
const circulatingMarketCap = parseFloat(parts[44]).toFixed(2) + '亿';
const marketCap = parseFloat(parts[45]).toFixed(2) + '亿';
const pbRatio = parseFloat(parts[46]).toFixed(2);
const formatTime = (ts) => {
if (!ts || ts.length !== 14) return '';
return `${ts.substring(8, 10)}:${ts.substring(10, 12)}:${ts.substring(12, 14)}`;
};
const formattedTime = formatTime(time);
// --- 提取买卖盘信息 ---
const sellLevels = [
{ price: parseFloat(parts[19]).toFixed(2), volume: parseInt(parts[20]) }, // 卖一
{ price: parseFloat(parts[21]).toFixed(2), volume: parseInt(parts[22]) }, // 卖二
{ price: parseFloat(parts[23]).toFixed(2), volume: parseInt(parts[24]) }, // 卖三
{ price: parseFloat(parts[25]).toFixed(2), volume: parseInt(parts[26]) }, // 卖四
{ price: parseFloat(parts[27]).toFixed(2), volume: parseInt(parts[28]) }, // 卖五
];
const buyLevels = [
{ price: parseFloat(parts[9]).toFixed(2), volume: parseInt(parts[10]) },
{ price: parseFloat(parts[11]).toFixed(2), volume: parseInt(parts[12]) },
{ price: parseFloat(parts[13]).toFixed(2), volume: parseInt(parts[14]) },
{ price: parseFloat(parts[15]).toFixed(2), volume: parseInt(parts[16]) },
{ price: parseFloat(parts[17]).toFixed(2), volume: parseInt(parts[18]) },
];
let color = '#343a40';
if (priceChange > 0) color = '#dc3545';
else if (priceChange < 0) color = '#28a745';
// --- 生成包含三栏信息的HTML布局 ---
const stockHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<!-- 左侧: 名称, 价格, 涨跌 -->
<div style="flex-grow: 1; min-width: 0; max-width: 240px;">
<div style="font-size: 0.75em; color: #6c757d; margin-bottom: 4px;">更新: ${formattedTime}</div>
<div style="display: flex; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<h3 style="margin: 0; font-size: 1.15em; color: #212529;">${stockName}</h3>
<p style="margin: 0 0 0 8px; color: #6c757d; font-size: 0.85em;">${stockCode.toUpperCase()}</p>
</div>
<div style="text-align: left; margin-top: 4px;">
<span style="font-size: 2em; font-weight: 500; color: ${color};">${currentPrice}</span>
<span style="margin-left: 10px; font-size: 1em; color: ${color};">
<span>${priceChange > 0 ? '+' : ''}${priceChange}</span>
<span style="margin-left: 5px;">(${priceChange > 0 ? '+' : ''}${percentChange}%)</span>
</span>
</div>
</div>
<!-- 中间: 买卖盘 (修正顺序) -->
<div style="flex-shrink: 0; margin: 0 16px; font-size: 0.8em; width: 170px;">
${sellLevels.slice().reverse().map((level, i) => `
<div style="display: flex; justify-content: space-between; color: #495057;">
<span style="width: 25%;">卖${5 - i}</span>
<span style="width: 40%; text-align: right; color: #28a745;">${level.price}</span>
<span style="width: 35%; text-align: right;">${level.volume}</span>
</div>
`).join('')}
<div style="height: 1px; background-color: #e9ecef; margin: 2px 0;"></div>
${buyLevels.map((level, i) => `
<div style="display: flex; justify-content: space-between; color: #495057;">
<span style="width: 25%;">买${i + 1}</span>
<span style="width: 40%; text-align: right; color: #dc3545;">${level.price}</span>
<span style="width: 35%; text-align: right;">${level.volume}</span>
</div>
`).join('')}
</div>
<!-- 右侧: 其他详细信息 (按要求重新布局) -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 0.8em; color: #495057; text-align: left; min-width: 240px;">
<span><strong>昨 收:</strong> ${prevClose}</span>
<span><strong>今 开:</strong> ${openPrice}</span>
<span style="color: #c82333;"><strong>最 高:</strong> ${highPrice}</span>
<span style="color: #218838;"><strong>最 低:</strong> ${lowPrice}</span>
<span><strong>成交量:</strong> ${volume}万手</span>
<span><strong>成交额:</strong> ${amount}亿</span>
<span><strong>总市值:</strong> ${marketCap}</span>
<span><strong>流通值:</strong> ${circulatingMarketCap}</span>
<span><strong>换手率:</strong> ${turnover}</span>
<span><strong>市净率:</strong> ${pbRatio}</span>
<span><strong>振 幅:</strong> ${amplitude}</span>
<span><strong>市盈率:</strong> ${peRatio}</span>
</div>
</div>
`;
stockElement.innerHTML = stockHTML;
} catch (error) {
stockElement.innerHTML = `
<div style="color: #d9534f; padding: 12px 0; font-size: 0.9em;">
<strong>${stockCode.toUpperCase()} 加载失败:</strong> ${error.message}
</div>
`;
console.error(`Stock block error for ${stockCode}:`, error);
}
};
// 定义一个函数来触发所有股票的更新
const fetchAllStocks = () => {
stockCodes.forEach(updateStockData);
};
// 1. 立即执行一次,加载初始数据
fetchAllStocks();
// 2. 如果设置了刷新间隔,则启动定时器
if (refreshIntervalSeconds > 0) {
if (!this.stockUpdateTimer) {
this.stockUpdateTimer = setInterval(fetchAllStocks, refreshIntervalSeconds * 1000);
}
}
专业版
// --- 样式设置 ---
// 给整个块容器一些基本样式
this.style.backgroundColor = '#f8f9fa';
this.style.padding = '8px';
this.style.borderRadius = '8px';
this.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
this.style.border = '1px solid #dee2e6';
// --- 用户配置区 ---
// 1. 在下面的数组中添加您想关注的股票代码
const stockCodes = [
'sz000858', // 五粮液
'sh600519', // 贵州茅台
'sz300750', // 宁德时代
];
// 2. 设置数据自动更新的间隔(单位:秒)
// 设置为 0 或负数则不自动更新
const refreshIntervalSeconds = 3;
// --- 数据获取与渲染 ---
// 先清空块内容,准备初始化
this.innerHTML = '';
// 遍历配置的股票代码,为每只股票创建占位容器
stockCodes.forEach((stockCode, index) => {
const stockElement = document.createElement('div');
stockElement.id = `stock-container-${stockCode}`;
stockElement.style.padding = '12px 16px';
if (index < stockCodes.length - 1) {
stockElement.style.borderBottom = '1px solid #e9ecef';
}
stockElement.innerHTML = `<div style="color: #6c757d; font-size: 0.9em;">正在加载 ${stockCode}...</div>`;
this.appendChild(stockElement);
});
// 定义一个函数,用于更新单个股票的数据
const updateStockData = async (stockCode) => {
const stockElement = this.querySelector(`#stock-container-${stockCode}`);
if (!stockElement) return;
const url = `http://qt.gtimg.cn/q=${stockCode}`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`网络服务错误 (${response.status})`);
const buffer = await response.arrayBuffer();
const decoder = new TextDecoder('gbk');
const textData = decoder.decode(buffer);
const parts = textData.split('~');
if (parts.length < 75) throw new Error(`无效的代码或API响应不完整`);
// --- 提取核心信息 ---
const stockName = parts[1];
const currentPrice = parseFloat(parts[3]).toFixed(2);
const prevClose = parseFloat(parts[4]).toFixed(2);
const openPrice = parseFloat(parts[5]).toFixed(2);
const volume = parseInt(parts[6]);
const outerPlate = parseInt(parts[7]);
const innerPlate = parseInt(parts[8]);
const time = parts[30];
const priceChange = parseFloat(parts[31]).toFixed(2);
const percentChange = parseFloat(parts[32]).toFixed(2);
const highPrice = parseFloat(parts[33]).toFixed(2);
const lowPrice = parseFloat(parts[34]).toFixed(2);
const amount = (parseFloat(parts[37]) / 10000).toFixed(2); // 亿元
const turnover = parseFloat(parts[38]).toFixed(2) + '%';
const peRatioStatic = parseFloat(parts[39]).toFixed(2);
const amplitude = parseFloat(parts[43]).toFixed(2) + '%';
const circulatingMarketCap = parseFloat(parts[44]).toFixed(2) + '亿';
const marketCap = parseFloat(parts[45]).toFixed(2) + '亿';
const pbRatio = parseFloat(parts[46]).toFixed(2);
const upperLimit = parseFloat(parts[47]).toFixed(2);
const lowerLimit = parseFloat(parts[48]).toFixed(2);
const volumeRatio = parseFloat(parts[49]).toFixed(2);
const orderDiff = parts[50];
const avgPrice = parseFloat(parts[51]).toFixed(2);
const peRatioDynamic = parseFloat(parts[52]).toFixed(2);
const orderRatio = parseFloat(parts[74]).toFixed(2) + '%'; // 修正委比索引
const formatTime = (ts) => {
if (!ts || ts.length !== 14) return '';
return `${ts.substring(8, 10)}:${ts.substring(10, 12)}:${ts.substring(12, 14)}`;
};
const formattedTime = formatTime(time);
// --- 提取买卖盘信息 ---
const sellLevels = [
{ price: parseFloat(parts[27]).toFixed(2), volume: parseInt(parts[28]) },
{ price: parseFloat(parts[25]).toFixed(2), volume: parseInt(parts[26]) },
{ price: parseFloat(parts[23]).toFixed(2), volume: parseInt(parts[24]) },
{ price: parseFloat(parts[21]).toFixed(2), volume: parseInt(parts[22]) },
{ price: parseFloat(parts[19]).toFixed(2), volume: parseInt(parts[20]) },
];
const buyLevels = [
{ price: parseFloat(parts[9]).toFixed(2), volume: parseInt(parts[10]) },
{ price: parseFloat(parts[11]).toFixed(2), volume: parseInt(parts[12]) },
{ price: parseFloat(parts[13]).toFixed(2), volume: parseInt(parts[14]) },
{ price: parseFloat(parts[15]).toFixed(2), volume: parseInt(parts[16]) },
{ price: parseFloat(parts[17]).toFixed(2), volume: parseInt(parts[18]) },
];
let color = '#343a40';
if (priceChange > 0) color = '#dc3545';
else if (priceChange < 0) color = '#28a745';
// --- 生成包含三栏信息的HTML布局 ---
const stockHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<!-- 左侧: 名称, 价格, 涨跌 -->
<div style="flex-grow: 1; min-width: 0; max-width: 240px;">
<div style="font-size: 0.75em; color: #6c757d; margin-bottom: 4px;">更新: ${formattedTime}</div>
<div style="display: flex; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<h3 style="margin: 0; font-size: 1.15em; color: #212529;">${stockName}</h3>
<p style="margin: 0 0 0 8px; color: #6c757d; font-size: 0.85em;">${stockCode.toUpperCase()}</p>
</div>
<div style="text-align: left; margin-top: 4px;">
<span style="font-size: 2em; font-weight: 500; color: ${color};">${currentPrice}</span>
<span style="margin-left: 10px; font-size: 1em; color: ${color};">
<span>${priceChange > 0 ? '+' : ''}${priceChange}</span>
<span style="margin-left: 5px;">(${priceChange > 0 ? '+' : ''}${percentChange}%)</span>
</span>
</div>
</div>
<!-- 中间: 买卖盘 -->
<div style="flex-shrink: 0; margin: 0 16px; font-size: 0.8em; width: 170px;">
${sellLevels.map((level, i) => `
<div style="display: flex; justify-content: space-between; color: #495057;">
<span style="width: 25%;">卖${5 - i}</span>
<span style="width: 40%; text-align: right; color: #28a745;">${level.price}</span>
<span style="width: 35%; text-align: right;">${level.volume}</span>
</div>
`).join('')}
<div style="height: 1px; background-color: #e9ecef; margin: 2px 0;"></div>
${buyLevels.map((level, i) => `
<div style="display: flex; justify-content: space-between; color: #495057;">
<span style="width: 25%;">买${i + 1}</span>
<span style="width: 40%; text-align: right; color: #dc3545;">${level.price}</span>
<span style="width: 35%; text-align: right;">${level.volume}</span>
</div>
`).join('')}
</div>
<!-- 右侧: 其他详细信息 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; font-size: 0.8em; color: #495057; text-align: left; min-width: 320px;">
<span><strong>今开:</strong> ${openPrice}</span>
<span style="color: #c82333;"><strong>最高:</strong> ${highPrice}</span>
<span><strong>涨停:</strong> ${upperLimit}</span>
<span><strong>昨收:</strong> ${prevClose}</span>
<span style="color: #218838;"><strong>最低:</strong> ${lowPrice}</span>
<span><strong>跌停:</strong> ${lowerLimit}</span>
<span><strong>成交量:</strong> ${(volume / 10000).toFixed(2)}万</span>
<span><strong>成交额:</strong> ${amount}亿</span>
<span><strong>换手:</strong> ${turnover}</span>
<span><strong>外盘:</strong> ${outerPlate}</span>
<span><strong>内盘:</strong> ${innerPlate}</span>
<span><strong>振幅:</strong> ${amplitude}</span>
<span><strong>量比:</strong> ${volumeRatio}</span>
<span><strong>委差:</strong> ${orderDiff}</span>
<span><strong>委比:</strong> ${orderRatio}</span>
<span><strong>市盈(静):</strong> ${peRatioStatic}</span>
<span><strong>市盈(动):</strong> ${peRatioDynamic}</span>
<span><strong>市净率:</strong> ${pbRatio}</span>
<span><strong>流通值:</strong> ${circulatingMarketCap}</span>
<span><strong>总市值:</strong> ${marketCap}</span>
<span><strong>均价:</strong> ${avgPrice}</span>
</div>
</div>
`;
stockElement.innerHTML = stockHTML;
} catch (error) {
stockElement.innerHTML = `
<div style="color: #d9534f; padding: 12px 0; font-size: 0.9em;">
<strong>${stockCode.toUpperCase()} 加载失败:</strong> ${error.message}
</div>
`;
console.error(`Stock block error for ${stockCode}:`, error);
}
};
// 定义一个函数来触发所有股票的更新
const fetchAllStocks = () => {
stockCodes.forEach(updateStockData);
};
// 1. 立即执行一次,加载初始数据
fetchAllStocks();
// 2. 如果设置了刷新间隔,则启动定时器
if (refreshIntervalSeconds > 0) {
if (!this.stockUpdateTimer) {
this.stockUpdateTimer = setInterval(fetchAllStocks, refreshIntervalSeconds * 1000);
}
}
终极版
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于