查看“︁测试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行圆形LED点阵遮罩层 -->
      <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>
/* 样式独立命名，防止干扰 MediaWiki 原有皮肤 */
.zhbus-led-wrapper {
  width: 700px;
  margin: 15px auto;
  box-sizing: border-box;
}

/* 700px 宽度电子路牌外壳 */
.zhbus-led-casing {
  width: 700px;
  height: 96px;
  background: linear-gradient(180deg, #23252b 0%, #111215 100%);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 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: 7px;
  height: 7px;
  background: radial-gradient(circle, #777 30%, #333 80%);
  border-radius: 50%;
  box-shadow: inset 0 0 1px #000;
}
.zhbus-screw.tl { top: 5px; left: 5px; }
.zhbus-screw.tr { top: 5px; right: 5px; }
.zhbus-screw.bl { bottom: 5px; left: 5px; }
.zhbus-screw.br { bottom: 5px; right: 5px; }

/* LED 显示屏（严格控制 24 行圆形点阵） */
.zhbus-led-screen {
  position: relative;
  background-color: #050505;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #0a0a0c;
  height: 72px;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.95);
}

/* 24行圆形颗粒感发光罩层 */
.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.5px 1.5px, transparent 1.2px, #050505 1.5px),
    linear-gradient(to right, rgba(0,0,0,0.85) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.85) 1px, transparent 1px);
  background-size: 3px 3px, 3px 3px, 3px 3px;
}

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

/* 24点阵发光文字 */
.zhbus-led-text {
  font-family: "SimSun", "宋体", STSong, "NSimSun", monospace, serif !important;
  font-size: 56px;
  font-weight: 900;
  color: #ffc400;
  letter-spacing: 2px;
  line-height: 72px;
  padding-right: 60px;
  display: flex;
  align-items: center;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-shadow: 
    0 0 1px #ffd000,
    0 0 3px rgba(255, 196, 0, 0.8),
    0 0 6px rgba(255, 180, 0, 0.4);
}

/* ※ 隔开符号 */
.zhbus-sep {
  color: #ffc400;
  font-size: 48px;
  margin: 0 10px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(255, 196, 0, 0.8);
}

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

<script>
(function() {
  const API_URL = "https://apiv2.zhbuswx.com/ContentPublish/GetAll?appType=notice&pageIndex=1&pageSize=20";
  const FIXED_FIRST = "珠海巴士频道公交调整信息";
  const SEP = '<span class="zhbus-sep">※</span>';

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

  async function initZhbusLed() {
    let titles = [];
    try {
      const res = await fetch(API_URL);
      const data = await res.json();
      const items = data.data || data.Data || (data.data && data.data.list) || data;
      titles = items.map(i => i.Title || i.title).filter(Boolean);
      if (!titles.length) throw new Error();
    } catch(e) {
      titles = FALLBACK;
    }

    const allTitles = [FIXED_FIRST, ...titles];
    const fullHtml = SEP + allTitles.join(SEP) + SEP;

    const track = document.getElementById('zhbusLedTrack');
    const content = document.getElementById('zhbusLedContent');
    const contentClone = document.getElementById('zhbusLedContentClone');

    if (!track || !content || !contentClone) return;

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

    // 严格按照【1秒 3 个字】计算滚动时间
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = fullHtml;
    const charCount = (tempDiv.textContent || tempDiv.innerText || "").length;
    const duration = Math.max(charCount / 3, 2);

    track.style.animation = `zhbusMarquee ${duration}s linear infinite`;
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initZhbusLed);
  } else {
    initZhbusLed();
  }
})();
</script>
</html>