EMLOG自定义年份新年倒计时代码分享

摘要

博客志网站今天分享的是一个EMLOG博客的新年倒计时代码，支持自定义任意年份，不管是等龙年春节还是下一年跨年都能用，轻量代码不影响网站运行，放在侧边栏氛围感直接到位。

一、EMLOG博客侧边栏自定义年份新年倒计时代码分享

1、登录EMLOG Pro搭建的网站，然后点击【外观】-【边栏】，找到底部的【添加组件】

EMLOG自定义年份新年倒计时代码分享

2、将如下代码复制粘贴到对话框的内容栏，然后给这个组件命名，然后点击保存

<div style="background: linear-gradient(135deg, #f0f8fb 0%, #e8f4f8 100%); border-radius: 8px; padding: 20px; margin-bottom: 20px; border: 1px solid #d1e7f0;">
  <h3 style="color: #165dff; font-size: 18px; margin: 0 0 15px 0; text-align: center; font-weight: 600;">
    <i class="fas fa-sheep" style="margin-right: 8px;"></i>2027年春节倒计时
  </h3>
  <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px;">
    <div style="text-align: center; flex: 1; min-width: 60px;">
      <div id="yearDay" style="background: #165dff; color: #fff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px;">00</div>
      <div style="color: #666; font-size: 14px;">天</div>
    </div>
    <div style="text-align: center; flex: 1; min-width: 60px;">
      <div id="yearHour" style="background: #4080ff; color: #fff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px;">00</div>
      <div style="color: #666; font-size: 14px;">时</div>
    </div>
    <div style="text-align: center; flex: 1; min-width: 60px;">
      <div id="yearMinute" style="background: #f0f8fb; color: #165dff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px; border: 1px solid #d1e7f0;">00</div>
      <div style="color: #666; font-size: 14px;">分</div>
    </div>
    <div style="text-align: center; flex: 1; min-width: 60px;">
      <div id="yearSecond" style="background: #f0f8fb; color: #165dff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px; border: 1px solid #d1e7f0;">00</div>
      <div style="color: #666; font-size: 14px;">秒</div>
    </div>
  </div>
  <div style="text-align: center; margin-top: 15px; color: #888; font-size: 13px;">
    距离2027年2月6日（正月初一）还有
  </div>
</div>

<script>
// 2027年春节目标日期：2027-02-06 00:00:00（正月初一）
const targetDate = new Date('2027-02-06 00:00:00').getTime();

// 定时器更新倒计时
const timer = setInterval(() => {
  const now = new Date().getTime();
  const diff = targetDate - now;

  // 计算天、时、分、秒
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // 补零处理
  const formatNum = (num) => num < 10 ? '0' + num : num;

  // 更新DOM显示
  document.getElementById('yearDay').innerText = formatNum(days);
  document.getElementById('yearHour').innerText = formatNum(hours);
  document.getElementById('yearMinute').innerText = formatNum(minutes);
  document.getElementById('yearSecond').innerText = formatNum(seconds);

  // 倒计时结束后显示祝福
  if (diff <= 0) {
    clearInterval(timer);
    document.getElementById('yearDay').innerText = '00';
    document.getElementById('yearHour').innerText = '00';
    document.getElementById('yearMinute').innerText = '00';
    document.getElementById('yearSecond').innerText = '00';
    document.querySelector('div[style="text-align: center; margin-top: 15px;"]').innerText = '羊年大吉！万事如意！';
  }
}, 1000);
</script>

<!-- 引入图标和样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 图标动画效果 */
.fa-sheep {
  color: #ff7d00;
  animation: dragonpeath 2s infinite alternate;
}
@keyframes dragonpeath {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 1; transform: scale(1.2); }
}
</style>

3、将该组件添加到右侧，然后拖动排序即可

二、原理解析

这款EMLOG自定义年份新年倒计时代码兼容全版本 EMLOG程序，可自由自定义倒计时目标年份，跨年、春节通用，加载零延迟，可自定义文字、配色、尺寸，适配侧边栏模块简易嵌入教程，小白也能快速部署。

emlog教程前端代码