寻求非纯HTML实现：QNAP服务器赛事结果滚动展示方案

核心逻辑说明 #

外层永久循环，内层遍历n=1到20：

• 若文件F{n}（如F1.html/F1.txt）存在，则在网页展示该文件内容，停留30秒后切换
• 若文件不存在，直接跳过该序号，继续下一个n
• 全程禁用缓存，确保每次读取的都是最新导出的赛事数据

1. 服务器端脚本（QNAP Shell 实现） #

QNAP基于Linux内核，用Bash脚本实现循环逻辑，配合标记文件控制网页展示内容：

脚本代码（event_loop.sh） #

#!/bin/bash
# 替换为你的QNAP赛事结果文件存储路径，比如/share/CACHEDEV1_DATA/赛事结果
FILE_PATH="/share/CACHEDEV1_DATA/event_results"

while true; do
    for n in {1..20}; do
        # 优先检查HTML格式文件，再检查文本文件
        if [ -f "${FILE_PATH}/F${n}.html" ]; then
            echo "${FILE_PATH}/F${n}.html" > "${FILE_PATH}/current_show.txt"
            sleep 30
        elif [ -f "${FILE_PATH}/F${n}.txt" ]; then
            echo "${FILE_PATH}/F${n}.txt" > "${FILE_PATH}/current_show.txt"
            sleep 30
        fi
        # 文件不存在则直接跳过，进入下一个n的判断
    done
done

脚本部署与运行 #

1. 将脚本上传到QNAP任意共享文件夹（如/share/CACHEDEV1_DATA/scripts）
2. 赋予执行权限：chmod +x /share/CACHEDEV1_DATA/scripts/event_loop.sh
3. 后台永久运行：nohup /share/CACHEDEV1_DATA/scripts/event_loop.sh &
   • 如需开机自启，在QNAP「控制台」→「计划任务」→「新增」，设置触发事件为「开机时」，执行上述后台运行命令

2. 网页端展示代码（禁用缓存+自动切换） #

网页读取服务器标记的当前文件，适配大屏展示，同时强制禁用缓存：

展示页面（show_results.html） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>赛事结果滚动展示</title>
    <!-- 彻底禁用浏览器缓存 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <style>
        /* 适配大屏全屏展示 */
        body { margin: 0; padding: 30px; font-size: 28px; background-color: #fff; }
        .content-box { width: 100%; height: 95vh; display: flex; align-items: center; justify-content: center; }
    </style>
</head>
<body>
    <div class="content-box" id="result_container"></div>

    <script>
        function loadLatestResult() {
            // 加时间戳参数，避免浏览器缓存请求
            fetch('/event_results/current_show.txt?ts=' + Date.now())
                .then(res => res.text())
                .then(filePath => {
                    if (!filePath) {
                        document.getElementById('result_container').innerText = "暂无赛事结果";
                        return;
                    }
                    // 根据文件后缀选择渲染方式
                    if (filePath.endsWith('.html')) {
                        fetch(filePath + '?ts=' + Date.now())
                            .then(htmlRes => htmlRes.text())
                            .then(html => document.getElementById('result_container').innerHTML = html);
                    } else if (filePath.endsWith('.txt')) {
                        fetch(filePath + '?ts=' + Date.now())
                            .then(txtRes => txtRes.text())
                            .then(text => document.getElementById('result_container').innerText = text);
                    }
                });
        }

        // 初始加载+每29秒刷新（配合脚本30秒停留，实现无缝切换）
        loadLatestResult();
        setInterval(loadLatestResult, 29000);
    </script>
</body>
</html>

网页部署 #

1. 将show_results.html上传到QNAP Web服务器根目录（默认路径为/share/CACHEDEV1_DATA/Web）
2. 给赛事结果文件夹开启Web访问权限：在QNAP「控制台」→「权限管理」→「共享文件夹」，找到event_results文件夹，勾选「Web服务器访问权限」

3. 数据导出配置 #

将电子表格定期导出的文件命名为F1.html/F1.txt…F20.html/F20.txt，直接上传到event_results文件夹即可，脚本会自动识别并按规则展示。

内容的提问来源于stack exchange，提问作者BonzoDawg269