查看“︁测试20”︁的源代码

<html>
<div class="zhbus-led-wrapper">
  <div class="zhbus-led-casing">
    <div class="zhbus-screw tl"></div><div class="zhbus-screw tr"></div>
    <div class="zhbus-screw bl"></div><div class="zhbus-screw br"></div>

    <div class="zhbus-led-screen">
      <!-- 24行硬边缘点阵遮罩层（彻底消除半亮灯珠） -->
      <div class="zhbus-led-overlay"></div>
      
      <!-- 滚动文本轨 -->
      <div class="zhbus-led-track" id="zhbusLedTrack">
        <div class="zhbus-led-text" id="zhbusLedContent">加载中...</div>
        <div class="zhbus-led-text" id="zhbusLedContentClone">加载中...</div>
      </div>
    </div>
  </div>
</div>

<style>
/* 容器：500px 宽度 */
.zhbus-led-wrapper {
  width: 500px;
  margin: 15px auto;
  box-sizing: border-box;
}

/* 500px 外壳，高度 70px */
.zhbus-led-casing {
  width: 500px;
  height: 70px;
  background: linear-gradient(180deg, #23252b 0%, #111215 100%);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.85), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  border: 2px solid #30333d;
  position: relative;
  box-sizing: border-box;
}

/* 螺丝钉细节 */
.zhbus-screw {
  position: absolute;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #777 30%, #333 80%);
  border-radius: 50%;
  box-shadow: inset 0 0 1px #000;
}
.zhbus-screw.tl { top: 4px; left: 4px; }
.zhbus-screw.tr { top: 4px; right: 4px; }
.zhbus-screw.bl { bottom: 4px; left: 4px; }
.zhbus-screw.br { bottom: 4px; right: 4px; }

/* 显示屏主区域：高度 50px */
.zhbus-led-screen {
  position: relative;
  background-color: #000000;
  border-radius: 3px;
  overflow: hidden;
  border: 2px solid #0a0a0c;
  height: 50px;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.98);
}

/* 硬边缘点阵遮罩层：0.7px 到 0.75px 极窄过渡，杜绝灯珠亮一半 */
.zhbus-led-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 1.04px 1.04px, transparent 0.7px, #000000 0.75px);
  background-size: 2.08px 2.08px;
}

/* 滚动轨 */
.zhbus-led-track {
  display: flex;
  white-space: nowrap;
  position: absolute;
  will-change: transform;
}

/* 专为 LED 点阵优化的像素字体与渲染 */
.zhbus-led-text {
  font-family: "SimSun-ExtB", "NSimSun", "SimSun", "Courier New", monospace !important;
  font-size: 42px;
  font-weight: 900;
  color: #ffcc00;
  letter-spacing: 2px;
  line-height: 50px;
  padding-right: 40px;
  display: flex;
  align-items: center;
  
  /* 强制关闭抗锯齿，保留纯粹像素点 */
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: unset !important;
  font-smooth: never !important;

  /* 高对比度二值化滤镜 */
  filter: contrast(300%) drop-shadow(0 0 1px #ffc400);
}

/* ※ 间隔符 */
.zhbus-sep {
  color: #ffcc00;
  font-size: 34px;
  margin: 0 8px;
  font-weight: 900;
  filter: contrast(300%);
}

@keyframes zhbusMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
</style>

<!-- 利用图片 onerror 绕过 MediaWiki 对 script 标签的剥离与过滤机制 -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="display:none;" onerror="
(function() {
  var API_URL = 'https://apiv2.zhbuswx.com/ContentPublish/GetAll?appType=notice&pageIndex=1&pageSize=20';
  var FIXED_FIRST = '珠海巴士频道公交调整信息';
  var SEP = '<span class=&quot;zhbus-sep&quot;>※</span>';

  var FALLBACK = [
    '关于调整公交201路、K4路运行路线及停靠站点的公告',
    '关于优化调整部分公交线路首尾班车时间的通告',
    '关于针对雷雨恶劣天气实施公交应急保障预案的通知',
    '关于乘车码刷码系统升级维护的温馨提示',
    '关于开通高考专线及学生高考免费乘车政策的通告'
  ];

  function runLed() {
    var track = document.getElementById('zhbusLedTrack');
    var content = document.getElementById('zhbusLedContent');
    var contentClone = document.getElementById('zhbusLedContentClone');

    if (!track || !content || !contentClone || track.dataset.inited) return;
    track.dataset.inited = 'true';

    var controller = new AbortController();
    var timer = setTimeout(function() { controller.abort(); }, 3000);

    fetch(API_URL, { signal: controller.signal })
      .then(function(res) {
        clearTimeout(timer);
        if (!res.ok) throw new Error();
        return res.json();
      })
      .then(function(data) {
        var items = data.data || data.Data || (data.data && data.data.list) || data;
        var titles = [];
        if (Array.isArray(items)) {
          titles = items
            .map(function(i) { return i.Title || i.title; })
            .filter(Boolean)
            .filter(function(t) { return t.indexOf('【已恢复】') === -1; });
        }
        if (!titles.length) throw new Error();
        render(titles);
      })
      .catch(function() {
        clearTimeout(timer);
        var safeFallback = FALLBACK.filter(function(t) { return t.indexOf('【已恢复】') === -1; });
        render(safeFallback);
      });

    function render(titles) {
      var allTitles = [FIXED_FIRST].concat(titles);
      var fullHtml = SEP + allTitles.join(SEP) + SEP;

      content.innerHTML = fullHtml;
      contentClone.innerHTML = fullHtml;

      var tempDiv = document.createElement('div');
      tempDiv.innerHTML = fullHtml;
      var charCount = (tempDiv.textContent || tempDiv.innerText || '').length;
      var duration = Math.max(charCount / 3, 2);

      track.style.animation = 'zhbusMarquee ' + duration + 's linear infinite';
    }
  }

  setTimeout(runLed, 50);
})();
" />
</html>