通达信插件-“涨停炸板时间轴”，用通用浏览器调用
2025-06-03 17:19:28
牛人开发的通达信插件，可盘中依据涨停时间显示涨停或炸板的个股信息。
个股所属概念，调用KPL数据。
通过通达信的“通用浏览器”调用使用。
界面如图：
使用方法步骤：
1、把下面源代码复制到“记事本”，并保存为.html格式，命名为“涨停炸板时间轴.html”
2、“涨停炸板时间轴.html”可存放于本机任意位置。
3、在通达信自定义版面，新建“通用浏览器”，在地址上选取该““涨停炸板时间轴.html””文件即可。
“涨停炸板时间轴.html”源代码如下：
Markup
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>涨停时间轴</title>
<style>
body {
font-family: "Microsoft YaHei", sans-serif;
margin: 0px;
background: #000;
color: #fff;
padding-top: 90px;
}
.controls {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #000;
padding: 2px;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.market-overview {
width: 100%;
padding: 2px 0;
border-bottom: 1px solid #333;
margin-bottom: 1px;
}
.market-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.5;
}
.stats-bar {
padding: 1px 2px;
background: #222;
display: flex;
flex-direction: column;
font-size: 14px;
display: flex;
gap: 5px;
border-bottom: 1px solid #333;
}
.market-row span {
margin: 0 8px;
color: #fff;
}
.market-row .red { color: #ff0000; }
.market-row .green { color: #00ff00; }
.market-row .white { color: #ffffff; }
.market-row .highlight { color: #ffd700; }
.market-row .blue { color: #00bfff; }
.original-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
padding-top: 2px;
}
.type-label {
color: #ffd700;
font-size: 18px;
margin-right: 2px;
white-space: nowrap;
}
#cztCount { color: #00ff00; font-size: 0.8em; margin-left: 1px; }
#ztCount { color: #ff0000; font-size: 0.8em; margin-left: 1px; }
.date-control {
display: flex;
align-items: center;
gap: 8px;
}
.date-btn {
background: none;
border: 1px solid #FFD700;
color: #FFD700;
padding: 2px 6px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.refresh-btn {
background: #FFD700;
color: #1a1a1a;
border: none;
padding: 2px 6px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 0px;
margin-top: 65px;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
bottom: 0;
width: 4px;
background: #ffd700;
box-shadow: 0 0 10px #ffd700;
}
.timeline-item {
position: relative;
margin-bottom: 2px;
display: flex;
justify-content: space-between;
width: 100%;
}
.time-marker.red { color: #ff0000; text-shadow: 0 0 8px #ff0000; }
.time-marker.white { color: #ffffff; text-shadow: 0 0 8px #ffffff; }
.time-marker.purple-red { color: #ff00ff; text-shadow: 0 0 8px #ff00ff; }
.time-marker {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
width: 50px;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.left-panel,
.right-panel {
width: 45%;
min-height: 20px;
padding: 2px;
background: #1a1a1a;
border-radius: 6px;
border: 1px solid #333;
}
.stock-item {
display: grid;
grid-template-columns: minmax(max-content, auto) minmax(max-content, auto) minmax(max-content, 1fr);
gap: 2px;
padding: 2px;
margin: 2px 0;
align-items: center;
background: #2a2a2a;
border-radius: 4px;
border-left: 2px solid #ffd700;
}
.stock-name {
font-weight: bold;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
color: #ffd700;
text-decoration: none;
font-size: 14px;
min-width: max-content;
}
.stock-name:hover {
color: white;
text-shadow: 0 0 8px #ffd700;
}
.board-status {
text-align: center;
color: #ffd700;
font-size: 14px;
padding: 1px 2px;
border-radius: 3px;
min-width: max-content;
}
.stock-item.has-yesterday {
grid-template-columns: minmax(max-content, auto) minmax(max-content, auto) minmax(max-content, auto) minmax(max-content, 1fr);
}
.stock-item.has-fengdan {
grid-template-columns: minmax(max-content, auto) minmax(max-content, auto) minmax(max-content, auto) minmax(max-content, 1fr);
}
.yesterday-dayb {
font-size: 12px;
color: #888;
padding: 0 3px;
min-width: 20px;
text-align: center;
}
.reason-box {
cursor: pointer;
padding: 2px;
border-radius: 3px;
transition: all 0.3s;
font-size: 12px;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
background: rgba(255,255,255,0.1);
min-width: max-content;
}
.fengdan-box {
font-size: 12px;
color: #ffd700;
padding: 0 3px;
text-align: right;
min-width: max-content;
}
@keyframes glow {
0% { box-shadow: 0 0 5px currentColor; }
50% { box-shadow: 0 0 20px currentColor; }
100% { box-shadow: 0 0 5px currentColor; }
}
</style>
</head>
<body>
<div>
<div>
<div id="statsBar">
<div>板块：<span id="reasonCount">0</span></div>
<div>连板：<span id="daybCount">0</span></div>
</div>
<div id="marketRow1"></div>
<div id="marketRow2"></div>
<div id="marketRow3"></div>
</div>
<div>
<span>
炸板<span id="cztCount">0</span>|涨停<span id="ztCount">0</span>
</span>
<div>
<button id="prev-day"><</button>
<span id="current-date"></span>
<button id="next-day">></button>
<button id="refreshBtn">刷新</button>
</div>
</div>
</div>
<div id="timeline"></div>
<script>
function getBeijingDate() {
const now = new Date();
return new Date(now.getTime() + (now.getTimezoneOffset() * 60000) + (3600000 * 8));
}
function isWorkday(date) {
const day = date.getDay();
return day !== 0 && day !== 6;
}
function getLastWorkday() {
const now = getBeijingDate();
const isTodayWorkday = isWorkday(now);
const currentHour = now.getHours();
const currentMinute = now.getMinutes();
if (isTodayWorkday) {
if (currentHour > 9
翔云优配提示：文章来自网络，不代表本站观点。
