跳转到内容

模板:生物联赛倒计时：修订间差异

来自osm&bio
下一编辑→
Magezeya​（留言 | 贡献）
341次编辑
可视化wikitext
Magezeya​（留言 | 贡献）
341次编辑
创建页面，内容为“<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);…”
 
Magezeya​（留言 | 贡献）
341次编辑
无编辑摘要
第1行： 第1行：
<includeonly>
<includeonly>
<!-- 主容器 -->
<div style="border: 2px solid #4CAF50; border-radius: 10px; padding: 20px; margin: 15px 0; background: linear-gradient(135deg, #f5fdf5 0%, #e8f5e8 100%); box-shadow: 0 4px 8px rgba(0,0,0,0.05); text-align: center; font-family: 'Arial', sans-serif;">
<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="font-size: 22px; color: #2E7D32; font-weight: bold; margin-bottom: 15px;">
 
     全国生物联赛倒计时
<!-- 标题区域 -->
<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>
 
   <div style="font-size: 28px; color: #1B5E20; font-weight: bold; padding: 10px; background-color: #fff; border-radius: 8px; display: inline-block; min-width: 200px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
   <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
     {{#if: {{#time: Y-m-d}} <= 2025-05-11 | {{Countdown|2025-05-11|text=天}} |
     <div class="countdown-box">
    {{#if: {{#time: Y-m-d}} <= 2026-05-10 | {{Countdown|2026-05-10|text=天}} |
      <div id="countdown-days" class="countdown-number">00</div>
    {{#if: {{#time: Y-m-d}} <= 2027-05-09 | {{Countdown|2027-05-09|text=天}} |
      <div class="countdown-label">天</div>
    {{#if: {{#time: Y-m-d}} <= 2028-05-14 | {{Countdown|2028-05-14|text=天}} |
     </div>
    {{#if: {{#time: Y-m-d}} <= 2029-05-13 | {{Countdown|2029-05-13|text=天}} |
     <div class="countdown-box">
    {{#if: {{#time: Y-m-d}} <= 2030-05-12 | {{Countdown|2030-05-12|text=天}} |
      <div id="countdown-hours" class="countdown-number">00</div>
    {{#if: {{#time: Y-m-d}} <= 2031-05-11 | {{Countdown|2031-05-11|text=天}} |
      <div class="countdown-label">小时</div>
     {{#if: {{#time: Y-m-d}} <= 2032-05-09 | {{Countdown|2032-05-09|text=天}} |
     </div>
     {{#if: {{#time: Y-m-d}} <= 2033-05-08 | {{Countdown|2033-05-08|text=天}} |
     <div class="countdown-box">
    {{#if: {{#time: Y-m-d}} <= 2034-05-14 | {{Countdown|2034-05-14|text=天}} |
      <div id="countdown-minutes" class="countdown-number">00</div>
    {{#if: {{#time: Y-m-d}} <= 2035-05-13 | {{Countdown|2035-05-13|text=天}} |
      <div class="countdown-label">分钟</div>
    {{#if: {{#time: Y-m-d}} <= 2036-05-11 | {{Countdown|2036-05-11|text=天}} |
     </div>
    {{#if: {{#time: Y-m-d}} <= 2037-05-10 | {{Countdown|2037-05-10|text=天}} |
     <div class="countdown-box">
     {{#if: {{#time: Y-m-d}} <= 2038-05-09 | {{Countdown|2038-05-09|text=天}} |
      <div id="countdown-seconds" class="countdown-number">00</div>
     {{#if: {{#time: Y-m-d}} <= 2039-05-08 | {{Countdown|2039-05-08|text=天}} |
      <div class="countdown-label">秒</div>
    {{#if: {{#time: Y-m-d}} <= 2040-05-13 | {{Countdown|2040-05-13|text=天}} |
     </div>
    {{#if: {{#time: Y-m-d}} <= 2041-05-12 | {{Countdown|2041-05-12|text=天}} |
    {{#if: {{#time: Y-m-d}} <= 2042-05-11 | {{Countdown|2042-05-11|text=天}} |
    {{#if: {{#time: Y-m-d}} <= 2043-05-10 | {{Countdown|2043-05-10|text=天}} |
     {{#if: {{#time: Y-m-d}} <= 2044-05-08 | {{Countdown|2044-05-08|text=天}} |
     {{#if: {{#time: Y-m-d}} <= 2045-05-14 | {{Countdown|2045-05-14|text=天}} |
    {{#if: {{#time: Y-m-d}} <= 2046-05-13 | {{Countdown|2046-05-13|text=天}} |
    {{#if: {{#time: Y-m-d}} <= 2047-05-12 | {{Countdown|2047-05-12|text=天}} |
    {{#if: {{#time: Y-m-d}} <= 2048-05-10 | {{Countdown|2048-05-10|text=天}} |
    {{#if: {{#time: Y-m-d}} <= 2049-05-09 | {{Countdown|2049-05-09|text=天}} |
     {{#if: {{#time: Y-m-d}} <= 2050-05-08 | {{Countdown|2050-05-08|text=天}} | 2050年后日期待定
    }}}}}}}}}}}}}}}}}}}}}}}}}}}
   </div>
   </div>
 
   <div style="font-size: 16px; color: #558B2F; margin-top: 10px;">
   <div id="contest-date" style="margin-top: 20px; color: #666; font-style: italic;">
     {{#if: {{#time: Y-m-d}} <= 2025-05-11 | 2025年全国生物联赛将于5月11日举行 |
     比赛日期计算中...
    {{#if: {{#time: Y-m-d}} <= 2026-05-10 | 2026年全国生物联赛将于5月10日举行 |
    {{#if: {{#time: Y-m-d}} <= 2027-05-09 | 2027年全国生物联赛将于5月9日举行 |
    {{#if: {{#time: Y-m-d}} <= 2028-05-14 | 2028年全国生物联赛将于5月14日举行 |
    {{#if: {{#time: Y-m-d}} <= 2029-05-13 | 2029年全国生物联赛将于5月13日举行 |
    {{#if: {{#time: Y-m-d}} <= 2030-05-12 | 2030年全国生物联赛将于5月12日举行 |
    {{#if: {{#time: Y-m-d}} <= 2031-05-11 | 2031年全国生物联赛将于5月11日举行 |
    {{#if: {{#time: Y-m-d}} <= 2032-05-09 | 2032年全国生物联赛将于5月9日举行 |
    {{#if: {{#time: Y-m-d}} <= 2033-05-08 | 2033年全国生物联赛将于5月8日举行 |
    {{#if: {{#time: Y-m-d}} <= 2034-05-14 | 2034年全国生物联赛将于5月14日举行 |
    {{#if: {{#time: Y-m-d}} <= 2035-05-13 | 2035年全国生物联赛将于5月13日举行 |
    {{#if: {{#time: Y-m-d}} <= 2036-05-11 | 2036年全国生物联赛将于5月11日举行 |
    {{#if: {{#time: Y-m-d}} <= 2037-05-10 | 2037年全国生物联赛将于5月10日举行 |
    {{#if: {{#time: Y-m-d}} <= 2038-05-09 | 2038年全国生物联赛将于5月9日举行 |
    {{#if: {{#time: Y-m-d}} <= 2039-05-08 | 2039年全国生物联赛将于5月8日举行 |
    {{#if: {{#time: Y-m-d}} <= 2040-05-13 | 2040年全国生物联赛将于5月13日举行 |
    {{#if: {{#time: Y-m-d}} <= 2041-05-12 | 2041年全国生物联赛将于5月12日举行 |
    {{#if: {{#time: Y-m-d}} <= 2042-05-11 | 2042年全国生物联赛将于5月11日举行 |
    {{#if: {{#time: Y-m-d}} <= 2043-05-10 | 2043年全国生物联赛将于5月10日举行 |
    {{#if: {{#time: Y-m-d}} <= 2044-05-08 | 2044年全国生物联赛将于5月8日举行 |
    {{#if: {{#time: Y-m-d}} <= 2045-05-14 | 2045年全国生物联赛将于5月14日举行 |
    {{#if: {{#time: Y-m-d}} <= 2046-05-13 | 2046年全国生物联赛将于5月13日举行 |
    {{#if: {{#time: Y-m-d}} <= 2047-05-12 | 2047年全国生物联赛将于5月12日举行 |
    {{#if: {{#time: Y-m-d}} <= 2048-05-10 | 2048年全国生物联赛将于5月10日举行 |
    {{#if: {{#time: Y-m-d}} <= 2049-05-09 | 2049年全国生物联赛将于5月9日举行 |
    {{#if: {{#time: Y-m-d}} <= 2050-05-08 | 2050年全国生物联赛将于5月8日举行 | 2050年后日期待定
    }}}}}}}}}}}}}}}}}}}}}}}}}}}
   </div>
   </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>
</div>
</includeonly>
</includeonly>
<noinclude>
== 全国生物学竞赛倒计时模板 ==
这是一个显示全国生物学竞赛倒计时的模板，比赛日期为每年的五月第二个星期日。
=== 使用方法 ===
只需在任意页面插入以下代码：
<pre>
{{全国生物学竞赛倒计时}}
</pre>
=== 功能特点 ===
* 自动计算每年的五月第二个星期日
* 动态倒计时显示（天、小时、分钟、秒）
* 自动判断今年是否已过比赛日期，显示下一年的比赛
* 响应式设计，适配各种屏幕尺寸
* 美观的UI设计
[[Category:倒计时模板]]
[[Category:教育模板]]
[[Category:动态模板]]
</noinclude>

2025年8月21日 (四) 17:56的版本

检索自“https://osm.bio/index.php?title=模板:生物联赛倒计时&oldid=11009”