<style>
/* 现代化统计页面样式 */
.stats-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 60px 20px;
border-radius: 20px;
margin: 30px 0;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}

.stats-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
pointer-events: none;
}

.stats-title {
font-size: 2.5em;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
position: relative;
z-index: 1;
}

.stats-subtitle {
font-size: 1.1em;
opacity: 0.9;
margin-bottom: 40px;
position: relative;
z-index: 1;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 1;
}

.stat-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 30px 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.stat-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
}

.stat-icon {
font-size: 2.5em;
margin-bottom: 15px;
display: block;
}

.stat-label {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 10px;
opacity: 0.9;
}

.stat-number {
font-size: 3em;
font-weight: 800;
line-height: 1;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.stat-desc {
font-size: 0.9em;
opacity: 0.7;
font-weight: 300;
}

.controls-section {
text-align: center;
margin: 40px 0;
}

.btn {
display: inline-block;
padding: 12px 30px;
margin: 0 10px 10px 0;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-primary {
background: linear-gradient(45deg, #007bff, #0056b3);
color: white;
}

.btn-success {
background: linear-gradient(45deg, #28a745, #1e7e34);
color: white;
}

.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.info-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 15px;
padding: 30px;
margin: 30px 0;
border-left: 5px solid #007bff;
}

.info-title {
color: #007bff;
font-size: 1.3em;
font-weight: 700;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}

.info-list {
list-style: none;
padding: 0;
}

.info-list li {
padding: 8px 0;
border-bottom: 1px solid rgba(0,123,255,0.1);
display: flex;
align-items: flex-start;
gap: 10px;
}

.info-list li:last-child {
border-bottom: none;
}

.info-list li strong {
color: #007bff;
min-width: 100px;
}

@media (max-width: 768px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 20px;
}

.stats-title {
font-size: 2em;
}

.stat-number {
font-size: 2.5em;
}

.btn {
display: block;
margin: 10px auto;
max-width: 200px;
}
}

/* 加载动画 */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

.loading {
animation: pulse 1.5s ease-in-out infinite;
}

/* 估算数据标识 */
.estimated-badge {
display: inline-block;
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
margin-top: 5px;
border: 1px solid rgba(255, 193, 7, 0.3);
}
</style>

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<script>
// 增强的不蒜子统计处理
(function () {
'use strict';

var retryCount = 0;
var maxRetries = 5;
var checkInterval = 500;

function updateStats() {
    var pv = document.getElementById('busuanzi_value_site_pv');
    var uv = document.getElementById('busuanzi_value_site_uv');
    var pagePv = document.getElementById('busuanzi_value_page_pv');
    
    if (pv && pv.textContent && pv.textContent !== '加载中...' && pv.textContent !== '0') {
        // 移除加载动画
        document.querySelectorAll('.stat-number').forEach(function(el) {
            el.classList.remove('loading');
        });
        return true;
    }
    return false;
}

function checkBusuanzi() {
    if (updateStats()) {
        return;
    }
    
    retryCount++;
    if (retryCount < maxRetries) {
        setTimeout(checkBusuanzi, checkInterval);
    } else {
        showEstimatedData();
    }
}

function showEstimatedData() {
    var startDate = new Date('2023-01-01');
    var currentDate = new Date();
    var daysSince = Math.floor((currentDate - startDate) / (1000 * 60 * 60 * 24));
    
    var estimatedPV = Math.floor(daysSince * 120 + Math.random() * 1000);
    var estimatedUV = Math.floor(estimatedPV * 0.35);
    var pagePV = Math.floor(Math.random() * 20 + 5);
    
    var pv = document.getElementById('busuanzi_value_site_pv');
    var uv = document.getElementById('busuanzi_value_site_uv');
    var pagePvEl = document.getElementById('busuanzi_value_page_pv');
    
    if (pv) {
        pv.textContent = estimatedPV.toLocaleString();
        pv.parentElement.innerHTML += '<div class="estimated-badge">估算数据</div>';
    }
    if (uv) {
        uv.textContent = estimatedUV.toLocaleString();
        uv.parentElement.innerHTML += '<div class="estimated-badge">估算数据</div>';
    }
    if (pagePvEl) {
        pagePvEl.textContent = pagePV.toLocaleString();
        pagePvEl.parentElement.innerHTML += '<div class="estimated-badge">估算数据</div>';
    }
    
    // 移除加载动画
    document.querySelectorAll('.stat-number').forEach(function(el) {
        el.classList.remove('loading');
    });
}

// 页面加载完成后开始检查
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(checkBusuanzi, 1000);
    });
} else {
    setTimeout(checkBusuanzi, 1000);
}

// 手动刷新功能
window.refreshStats = function() {
    retryCount = 0;
    var elements = ['busuanzi_value_site_pv', 'busuanzi_value_site_uv', 'busuanzi_value_page_pv'];
    elements.forEach(function(id) {
        var el = document.getElementById(id);
        if (el) {
            el.textContent = '刷新中...';
            el.parentElement.classList.add('loading');
        }
    });
    
    // 移除估算标识
    document.querySelectorAll('.estimated-badge').forEach(function(badge) {
        badge.remove();
    });
    
    setTimeout(function() {
        if (window.busuanzi && window.busuanzi.fetch) {
            window.busuanzi.fetch();
        }
        checkBusuanzi();
    }, 500);
};

})();
</script>

<div class="stats-hero">
<h1 class="stats-title">📊 网站访问统计 </h1>
<p class="stats-subtitle"> 实时追踪网站访问数据，见证每一次成长 </p>

<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">📈</div>
<div class="stat-label"> 总访问量 </div>
<div class="stat-number loading">
<span id="busuanzi_container_site_pv">
<span id="busuanzi_value_site_pv"> 加载中...</span>
</span>
</div>
<div class="stat-desc">Page Views</div>
</div>

<div class="stat-card">
  <div class="stat-icon">👥</div>
  <div class="stat-label">总访客数</div>
  <div class="stat-number loading">
    <span id="busuanzi_container_site_uv">
      <span id="busuanzi_value_site_uv">加载中...</span>
    </span>
  </div>
  <div class="stat-desc">Unique Visitors</div>
</div>

<div class="stat-card">
  <div class="stat-icon">🔥</div>
  <div class="stat-label">本页访问</div>
  <div class="stat-number loading">
    <span id="busuanzi_container_page_pv">
      <span id="busuanzi_value_page_pv">加载中...</span>
    </span>
  </div>
  <div class="stat-desc">This Page</div>
</div>

</div>
</div>

<div style="text-align: center; margin: 20px 0;">
<button onclick="refreshStats()" style="padding: 12px 24px; background: #007bff; color: white; border: none; border-radius: 25px; cursor: pointer; font-size: 14px; box-shadow: 0 4px 15px rgba(0,123,255,0.3); margin-right: 10px;">
🔄 刷新统计数据
</button>
<button onclick="location.reload()" style="padding: 12px 24px; background: #28a745; color: white; border: none; border-radius: 25px; cursor: pointer; font-size: 14px; box-shadow: 0 4px 15px rgba(40,167,69,0.3);">
🔄 重新加载页面
</button>
</div>

<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 20px 0; border-left: 4px solid #007bff;">
<h4 style="margin-top: 0; color: #007bff;">💡 统计数据说明 </h4>
<ul style="margin-bottom: 0;">
<li><strong > 实时数据 </strong>：由不蒜子统计服务提供，可能需要几秒钟加载 </li>
<li><strong > 估算数据 </strong>：如果统计服务暂时不可用，会显示基于网站运行时间的估算值 </li>
<li><strong > 数据更新 </strong>：每次访问页面时会自动更新，也可以手动刷新 </li>
<li><strong > 统计开始 </strong>：正式统计从 2025 年 9 月 20 日开始记录 </li>
</ul>
</div>

# 📈 统计说明

  • 总访问量：网站从建立以来的总页面浏览次数
  • 总访客数：网站从建立以来的独立访客数量
  • 本页访问：当前页面的访问次数

# 🚀 快速开始

如果你想为自己的网站添加类似的访问量统计，可以：

  1. 使用不蒜子统计（推荐）

    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!-- 总访问量 -->
<span id="busuanzi_container_site_pv">
  本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

<!-- 总访客数 -->
<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

  2. 配置 Google Analytics

  3. 使用百度统计

  4. 自建统计系统

# 📊 数据说明

  • 统计数据由不蒜子提供，采用本地存储 + 云端同步的方式
  • 数据更新可能有 1-2 分钟的延迟
  • 统计从 2025 年 9 月 20 日 开始记录

数据每次页面加载时实时更新，感谢不蒜子提供的免费统计服务

Edited on

Give me a cup of [coffee]~(锟ｂ柦锟?~*

Tartar0us WeChat Pay

WeChat Pay

Tartar0us Alipay

Alipay

Tartar0us PayPal

PayPal