查看“︁模板:生物联赛倒计时”︁的源代码

<includeonly>
<!-- 主容器 -->
<div id="biology-contest-countdown" style="font-family: 'Segoe UI', system-ui, sans-serif; max-width: 600px; margin: 20px auto; text-align: center;">

<!-- 标题区域 -->
<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 20px; border-radius: 15px 15px 0 0; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
  <h1 style="margin: 0; font-size: 2.2em; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">全国生物学竞赛倒计时</h1>
  <p style="font-size: 1.1em; opacity: 0.9; margin: 10px 0 0;">每年的五月第二个星期日</p>
</div>

<!-- 倒计时显示区域 -->
<div style="background: #fff; padding: 30px 20px; border-radius: 0 0 15px 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
  <div id="countdown-year" style="font-size: 1.5em; color: #333; margin-bottom: 15px; font-weight: bold;">
    计算中...
  </div>
  
  <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
    <div class="countdown-box">
      <div id="countdown-days" class="countdown-number">00</div>
      <div class="countdown-label">天</div>
    </div>
    <div class="countdown-box">
      <div id="countdown-hours" class="countdown-number">00</div>
      <div class="countdown-label">小时</div>
    </div>
    <div class="countdown-box">
      <div id="countdown-minutes" class="countdown-number">00</div>
      <div class="countdown-label">分钟</div>
    </div>
    <div class="countdown-box">
      <div id="countdown-seconds" class="countdown-number">00</div>
      <div class="countdown-label">秒</div>
    </div>
  </div>
  
  <div id="contest-date" style="margin-top: 20px; color: #666; font-style: italic;">
    比赛日期计算中...
  </div>
</div>

<!-- 装饰元素 -->
<div style="margin-top: 15px; display: flex; justify-content: center; gap: 10px;">
  <span style="display: inline-block; width: 15px; height: 15px; background: #4facfe; border-radius: 50%;"></span>
  <span style="display: inline-block; width: 15px; height: 15px; background: #00f2fe; border-radius: 50%;"></span>
  <span style="display: inline-block; width: 15px; height: 15px; background: #4facfe; border-radius: 50%;"></span>
</div>

<!-- JavaScript代码 -->
<script>
(function() {
  // 查找五月第二个星期日的函数
  function findSecondSundayInMay(year) {
    // 5月1日
    var mayFirst = new Date(year, 4, 1);
    // 获取5月1日是星期几 (0是星期日, 1是星期一, ..., 6是星期六)
    var dayOfWeek = mayFirst.getDay();
    // 计算到第二个星期日的天数
    var daysToAdd = dayOfWeek === 0 ? 7 : (14 - dayOfWeek) % 7;
    // 创建第二个星期日的日期对象
    var secondSunday = new Date(year, 4, 1 + daysToAdd);
    return secondSunday;
  }
  
  // 更新倒计时显示
  function updateCountdown() {
    var now = new Date();
    var currentYear = now.getFullYear();
    
    // 查找今年的比赛日期
    var thisYearContest = findSecondSundayInMay(currentYear);
    
    // 确定下一次比赛日期
    var nextContest;
    var contestYear;
    
    if (now < thisYearContest) {
      // 今年的比赛还没进行
      nextContest = thisYearContest;
      contestYear = currentYear;
    } else {
      // 今年的比赛已过，计算明年的
      nextContest = findSecondSundayInMay(currentYear + 1);
      contestYear = currentYear + 1;
    }
    
    // 计算时间差
    var timeDiff = nextContest - now;
    
    // 计算天、小时、分钟和秒
    var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
    
    // 更新显示
    document.getElementById('countdown-year').textContent = 
      '距离' + contestYear + '年全国生物学竞赛还有';
    
    document.getElementById('countdown-days').textContent = 
      days.toString().padStart(2, '0');
    
    document.getElementById('countdown-hours').textContent = 
      hours.toString().padStart(2, '0');
    
    document.getElementById('countdown-minutes').textContent = 
      minutes.toString().padStart(2, '0');
    
    document.getElementById('countdown-seconds').textContent = 
      seconds.toString().padStart(2, '0');
    
    document.getElementById('contest-date').textContent = 
      '比赛日期: ' + nextContest.getFullYear() + '年' + 
      (nextContest.getMonth() + 1) + '月' + 
      nextContest.getDate() + '日';
  }
  
  // 初始更新
  updateCountdown();
  
  // 每秒更新一次
  setInterval(updateCountdown, 1000);
})();
</script>

<!-- CSS样式 -->
<style>
.countdown-box {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  min-width: 80px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.countdown-number {
  font-size: 2.5em;
  font-weight: bold;
  color: #4facfe;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.countdown-label {
  margin-top: 5px;
  color: #666;
  font-size: 0.9em;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .countdown-box {
    min-width: 60px;
    padding: 10px;
  }
  
  .countdown-number {
    font-size: 2em;
  }
}
</style>
</div>
</includeonly>

<noinclude>
== 全国生物学竞赛倒计时模板 ==
这是一个显示全国生物学竞赛倒计时的模板，比赛日期为每年的五月第二个星期日。

=== 使用方法 ===
只需在任意页面插入以下代码：
<pre>
{{全国生物学竞赛倒计时}}
</pre>

=== 功能特点 ===
* 自动计算每年的五月第二个星期日
* 动态倒计时显示（天、小时、分钟、秒）
* 自动判断今年是否已过比赛日期，显示下一年的比赛
* 响应式设计，适配各种屏幕尺寸
* 美观的UI设计

[[Category:倒计时模板]]
[[Category:教育模板]]
[[Category:动态模板]]
</noinclude>