anheyu博客侧边栏创建日历卡片

基于的伍拾柒教程进行修改

无需修改主题源文件且代码经过适配

本人大学专业并不与开发相关，仅保证代码可正常运行，不保证其美观性

介绍

博客侧边栏倒数组件是一个轻量级的前端组件，用于在网页侧边栏显示距离目标日期的倒计时，以及今日、本周、本月、本年的进度条和剩余时间。该组件支持响应式设计，在不同设备上都能良好显示。

效果图

功能介绍

核心功能

目标日期倒计时：显示距离目标日期的天数
目标日期信息：显示目标日期的名称和具体日期
今日进度：显示当天的时间进度条和剩余小时数
本周进度：显示本周的时间进度条和剩余天数
本月进度：显示本月的时间进度条和剩余天数
本年进度：显示本年的时间进度条和剩余天数
悬停效果：鼠标悬停时显示剩余时间，隐藏百分比
定时更新：每分钟自动更新一次倒计时和进度条
响应式设计：在不同设备上都能良好显示

技术特点

模块化设计：代码采用模块化结构，易于理解和扩展
性能优化：使用CSS动画和定时更新，避免频繁DOM操作
用户体验：悬停效果增强用户交互体验
样式隔离：使用独立的样式标签，避免与现有样式冲突
兼容性良好：支持所有现代浏览器，代码结构清晰易维护
适配性强：支持Pjax和页面加载，确保在各种场景下正常工作

安装方法

方法一：安和鱼博客系统适配

如果你使用的是安和鱼（AnHeYu）博客系统，可以将以下代码添加到后台侧边栏配置中：

配置步骤

登录安和鱼博客系统后台（通常为 你的域名/admin）
进入 系统管理 → 系统设置 → 外观配置 → 侧边栏
将以下代码添加到侧边栏配置中

html

<style>
  .card-countdown .item-content {
    display: flex;
    align-items: center;
  }

  .cd-count-left {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-right: 0.8rem;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
  }

  .cd-count-left .cd-text {
    font-size: 14px;
  }

  .cd-count-left .cd-name {
    font-weight: bold;
    font-size: 18px;
  }

  .cd-count-left .cd-time {
    font-size: 30px;
    font-weight: bold;
    color: var(--anzhiyu-main);
  }

  .cd-count-left .cd-date {
    font-size: 12px;
    opacity: 0.6;
  }

  .cd-count-left::after {
    content: "";
    position: absolute;
    right: -0.8rem;
    width: 2px;
    height: 80%;
    background-color: var(--anzhiyu-main);
    opacity: 0.5;
  }

  .cd-count-right {
    flex: 1;
    margin-left: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .cd-count-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
  }

  .cd-item-name {
    font-size: 14px;
    margin-right: 0.8rem;
    white-space: nowrap;
  }

  .cd-item-progress {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    background-color: var(--anzhiyu-background);
    overflow: hidden;
  }

  .cd-progress-bar {
    height: 100%;
    border-radius: 8px;
    background-color: var(--anzhiyu-main);
  }

  .cd-percentage,
  .cd-remaining {
    position: absolute;
    font-size: 12px;
    margin: 0 6px;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }

  .cd-many {
    color: #fff;
  }

  .cd-remaining {
    opacity: 0;
    transform: translateX(10px);
  }

  .card-countdown .item-content:hover .cd-remaining {
    transform: translateX(0);
    opacity: 1;
  }

  .card-countdown .item-content:hover .cd-percentage {
    transform: translateX(-10px);
    opacity: 0;
  }
</style>

<div class="card-countdown">
  <div class="item-content">
    <div class="cd-count-left">
      <span class="cd-text">距离</span>
      <span class="cd-name" id="eventName"></span>
      <span class="cd-time" id="daysUntil"></span>
      <span class="cd-date" id="eventDate"></span>
    </div>
    <div id="countRight" class="cd-count-right"></div>
  </div>
</div>

<script>
  (() => {
    const config = {
      targetDate: "2026-02-17",
      targetName: "春节",
      units: {
        day: { text: "今日", unit: "小时" },
        week: { text: "本周", unit: "天" },
        month: { text: "本月", unit: "天" },
        year: { text: "本年", unit: "天" }
      }
    };

    const calculators = {
      day: () => {
        const hours = new Date().getHours();
        return {
          remaining: 24 - hours,
          percentage: (hours / 24) * 100
        };
      },
      week: () => {
        const day = new Date().getDay();
        const passed = day === 0 ? 6 : day - 1;
        return {
          remaining: 6 - passed,
          percentage: ((passed + 1) / 7) * 100
        };
      },
      month: () => {
        const now = new Date();
        const total = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
        const passed = now.getDate() - 1;
        return {
          remaining: total - passed,
          percentage: (passed / total) * 100
        };
      },
      year: () => {
        const now = new Date();
        const start = new Date(now.getFullYear(), 0, 1);
        const total = 365 + (now.getFullYear() % 4 === 0 ? 1 : 0);
        const passed = Math.floor((now - start) / 86400000);
        return {
          remaining: total - passed,
          percentage: (passed / total) * 100
        };
      }
    };

    function updateCountdown() {
      const elements = ['eventName', 'eventDate', 'daysUntil', 'countRight']
        .map(id => document.getElementById(id));

      if (elements.some(el => !el)) return;

      const [eventName, eventDate, daysUntil, countRight] = elements;
      const now = new Date();
      const target = new Date(config.targetDate);

      eventName.textContent = config.targetName;
      eventDate.textContent = config.targetDate;
      daysUntil.textContent = Math.round((target - now.setHours(0, 0, 0, 0)) / 86400000);

      countRight.innerHTML = Object.entries(config.units)
        .map(([key, { text, unit }]) => {
          const { remaining, percentage } = calculators[key]();
          return `
            <div class="cd-count-item">
                <div class="cd-item-name">${text}</div>
                <div class="cd-item-progress">
                    <div class="cd-progress-bar" style="width: ${percentage}%; opacity: ${percentage / 100}"></div>
                    <span class="cd-percentage ${percentage >= 46 ? 'cd-many' : ''}">${percentage.toFixed(2)}%</span>
                    <span class="cd-remaining ${percentage >= 60 ? 'cd-many' : ''}">
                        <span class="cd-tip">还剩</span>${remaining}<span class="cd-tip">${unit}</span>
                    </span>
                </div>
            </div>
          `;
        }).join('');
    }

    let timer;
    const start = () => {
      updateCountdown();
      if (timer) clearInterval(timer);
      timer = setInterval(updateCountdown, 600000);
    };

    start();

    ['pjax:complete', 'DOMContentLoaded'].forEach(event => document.addEventListener(event, start));
    document.addEventListener('pjax:send', () => timer && clearInterval(timer));
  })();
</script>

方法二：外部引入

将代码保存为 countdown.js 文件，然后在HTML中引入：

html

<link rel="stylesheet" href="path/to/countdown.css">
<div class="card-countdown">
  <!-- 倒数组件HTML结构 -->
</div>
<script src="path/to/countdown.js"></script>

自定义配置

倒数组件的样式和行为可以通过修改CSS和JavaScript来调整：

配置项说明

配置项	类型	默认值	说明
targetDate	String	"2026-02-17"	目标日期，格式为YYYY-MM-DD
targetName	String	"春节"	目标日期的名称
units	Object	包含day, week, month, year	时间单位配置
--anzhiyu-main	CSS变量	主题主色	进度条和倒计时颜色
--anzhiyu-background	CSS变量	主题背景色	进度条背景颜色
updateInterval	Number	600000	更新间隔，单位为毫秒

修改目标日期

如果你想修改目标日期和名称，可以调整JavaScript配置：

javascript

const config = {
  targetDate: "2026-02-17", // 修改为你想要的目标日期
  targetName: "春节", // 修改为你想要的目标名称
  // 其他配置...
};

修改时间单位显示

如果你想修改时间单位的显示文本，可以调整JavaScript配置：

javascript

const config = {
  // 其他配置...
  units: {
    day: { text: "今日", unit: "小时" },
    week: { text: "本周", unit: "天" },
    month: { text: "本月", unit: "天" },
    year: { text: "本年", unit: "天" }
  }
};

实现原理

核心功能

倒计时计算：计算距离目标日期的天数
进度条计算：计算今日、本周、本月、本年的进度和剩余时间
DOM更新：动态生成进度条和倒计时内容
定时更新：每分钟自动更新一次倒计时和进度条
悬停效果：使用CSS过渡实现悬停时的显示/隐藏效果

代码结构

代码结构解析

配置定义：定义目标日期、名称和时间单位配置
计算器：提供不同时间单位的进度和剩余时间计算
更新函数：更新倒计时和进度条显示
启动函数：初始化和定时更新
事件监听：支持Pjax和页面加载

注意事项

使用注意事项

兼容性：该组件使用了现代JavaScript语法，在IE浏览器上可能无法正常工作
性能：在低配置设备上，定时更新可能会影响性能
样式冲突：如果你的网站使用了相同的CSS类名，可能会产生样式冲突
目标日期：确保目标日期设置正确，格式为YYYY-MM-DD
时区问题：倒计时计算基于本地时区，可能会与服务器时区产生差异

常见问题

Q: 倒计时不显示怎么办？

A: 请检查以下几点：

确认代码是否正确复制到HTML文件中
检查浏览器控制台是否有错误信息
确认目标日期设置正确，格式为YYYY-MM-DD

Q: 进度条不更新怎么办？

A: 进度条会每分钟自动更新一次，如果你想立即更新，可以刷新页面或调用 updateCountdown() 函数。

Q: 如何修改进度条的颜色？

A: 可以修改CSS变量或直接修改CSS样式：

css

:root {
  --anzhiyu-main: #ff4500; /* 修改为你想要的颜色 */
  --anzhiyu-background: #f0f0f0; /* 修改为你想要的背景颜色 */
}

/* 或者直接修改 */
.cd-progress-bar {
  background-color: #ff4500; /* 修改为你想要的颜色 */
}

.cd-item-progress {
  background-color: #f0f0f0; /* 修改为你想要的背景颜色 */
}

总结

博客侧边栏倒数组件是一个功能丰富、易于使用的前端组件，可以为你的网站增添实用的倒计时和进度显示功能。它具有以下特点：

✅ 功能完整，显示目标日期倒计时和各种时间单位的进度
✅ 交互友好，悬停效果增强用户体验
✅ 响应式设计，自动适配不同设备
✅ 性能优化，定时更新避免频繁DOM操作
✅ 可自定义，支持修改目标日期、名称和样式

希望这个教程对你有所帮助，祝你使用愉快！

联系方式

如有问题或建议，欢迎在评论区交流或联系我：发送邮件

本教程基于anheyu-app主题开发，无需修改主题源文件且代码经过适配其他博客系统可能需要适当调整。代码已优化，兼容大部分现代浏览器。

anheyu博客侧边栏创建倒数卡片

anheyu博客侧边栏创建日历卡片

评论区