子比主题修复版显示网站数据信息

安装教程：
1.子比主题后台-外观-小工具-自定义hmtl(在首页主内容上面）增加以下代码
2.代码此处更换成自已绑定的域名
3.在网站根目录增加api目录，上传下载的文件到此目录

<section class="cards pcbdmapss">
    <!-- 原有卡片结构不变 -->
    <div class="cardhu card--oil">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
               <img src="https://www.ipapark.com/wp-content/uploads/2024/04/20240415221350248-用户.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><strong id="tj_jstext">0</strong>人</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">会员总数</div>
        </div>
    </div>
    <div class="cardhu card--tree">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.ipapark.com/wp-content/uploads/2024/04/20240415221347579-包裹.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_rzzs">0</span>个</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text"> 资源总量</div>
        </div>
    </div>
    <div class="cardhu card--water">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.ipapark.com/wp-content/uploads/2024/04/20240415221343243-旅游.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_wdyx">0</span>天</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text"> 运营天数</div>
        </div>
    </div>
    <div class="cardhu card--oil1">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.ipapark.com/wp-content/uploads/2024/04/20240415221341707-标签.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_24h">0</span>个</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text"> 今日发布</div>
        </div>
    </div>
    <div class="cardhu card--tree2">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.ipapark.com/wp-content/uploads/2024/04/20240415221345126-奖杯.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_view">0</span>人</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text"> 访问人数</div>
        </div>
    </div>
    <div class="cardhu card--water3">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img style="animation: 10s linear 0s normal none infinite running fa-spin;" src="https://www.ipapark.com/wp-content/uploads/2024/05/20240507093426247-%E6%99%B4%E5%A4%A9.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><p id="ptime">15:28:33</p></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">   系统时间</div>
        </div>
    </div>
</section>

<!-- 对接后端数据 + 原有功能脚本 -->
<script>
// 1. 全局变量
var tj_jstext = 0;   // 会员总数
var tj_rzzs = 0;     // 资源总量
var tj_wdyx = 0;     // 运营天数
var tj_24h = 0;      // 今日发布
var tj_view = 0;     // 访问人数
// 后端接口地址
const API_URL = "http://192.168.76.129/api/stats.php";

// 2. 渲染数据到页面
function renderStats() {
    document.getElementById('tj_jstext').textContent = tj_jstext || 0;
    document.getElementById('tj_rzzs').textContent = tj_rzzs || 0;
    document.getElementById('tj_wdyx').textContent = tj_wdyx || 0;
    document.getElementById('tj_24h').textContent = tj_24h || 0;
    document.getElementById('tj_view').textContent = tj_view || 0;
}

// 3. 从后端获取数据
async function fetchStats() {
    try {
        const response = await fetch(API_URL);
        const result = await response.json();
        if (result.code === 200) {
            // 更新全局变量
            tj_jstext = result.data.tj_jstext;
            tj_rzzs = result.data.tj_rzzs;
            tj_wdyx = result.data.tj_wdyx;
            tj_24h = result.data.tj_24h;
            tj_view = result.data.tj_view;
            // 渲染到页面
            renderStats();
        } else {
            console.error("数据获取失败：", result.msg);
        }
    } catch (error) {
        console.error("接口请求异常：", error);
    }
}

// 4. 动态更新系统时间
function updateSysTime() {
    const now = new Date();
    const h = String(now.getHours()).padStart(2, '0');
    const m = String(now.getMinutes()).padStart(2, '0');
    const s = String(now.getSeconds()).padStart(2, '0');
    document.getElementById('ptime').textContent = `${h}:${m}:${s}`;
}

// 5. 添加旋转动画样式
function addSpinAnimation() {
    const style = document.createElement('style');
    style.textContent = `
        @keyframes fa-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);
}

// 6. 页面加载后执行初始化
document.addEventListener('DOMContentLoaded', function() {
    addSpinAnimation(); // 初始化动画
    updateSysTime();    // 初始化时间
    fetchStats();       // 首次获取数据
    
    // 定时任务：每秒更新时间 + 每分钟刷新一次数据
    setInterval(updateSysTime, 1000);
    setInterval(fetchStats, 60000); 
});
</script>

<!-- 原有样式不变 -->
<style>
.cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 -5px;
    padding: 10px 0;
}
.cardhu {
    width: 14%;
    height: 10rem;
    background-color: #fff;
    border-radius: 12px;
    margin: 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
@media (max-width: 800px) {
    .cardhu {
        width: 23%;
        height: 8rem;
    }
    .cardhu.card--tree2, .cardhu.card--water3 {
        display: none;
    }
}
.card__count-text--big {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 10px 0;
}
.card__stuff-text {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}
.card__svg-wrapper {
    width: 3rem;
    margin-bottom: 10px;
}
.card__svg-wrapper img {
    max-width: 100%;
    height: auto;
}
</style>