HTML實戰項目:高考加油和中考加油

設計思路

頁面加載后會自動顯示高考內容,點擊頂部按鈕可以切換到中考內容。倒計時會每秒更新,為考生提供實時的備考時間參考。

  • 使用代表希望的藍色和金色漸變作為主色調

  • 頂部導航欄可切換高考/中考內容

  • 添加動態倒計時功能

  • 設計勵志名言卡片和備考小貼士

  • 添加動畫效果增強視覺體驗

  • 確保移動端友好設計

  • 下面是完整代碼演示

  • <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    ? ? <meta charset="UTF-8">
    ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ? ? <title>加油吧!學子們 - 高考中考加油</title>
    ? ? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    ? ? <style>
    ? ? ? ? * {
    ? ? ? ? ? ? margin: 0;
    ? ? ? ? ? ? padding: 0;
    ? ? ? ? ? ? box-sizing: border-box;
    ? ? ? ? ? ? font-family: 'Microsoft YaHei', sans-serif;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? body {
    ? ? ? ? ? ? background: linear-gradient(135deg, #1a2980, #26d0ce);
    ? ? ? ? ? ? color: #fff;
    ? ? ? ? ? ? min-height: 100vh;
    ? ? ? ? ? ? padding-bottom: 40px;
    ? ? ? ? ? ? background-attachment: fixed;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .container {
    ? ? ? ? ? ? max-width: 1200px;
    ? ? ? ? ? ? margin: 0 auto;
    ? ? ? ? ? ? padding: 20px;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? header {
    ? ? ? ? ? ? text-align: center;
    ? ? ? ? ? ? padding: 30px 0;
    ? ? ? ? ? ? position: relative;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? h1 {
    ? ? ? ? ? ? font-size: 3.5rem;
    ? ? ? ? ? ? margin-bottom: 10px;
    ? ? ? ? ? ? text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    ? ? ? ? ? ? background: linear-gradient(45deg, #ffd700, #ff8c00, #ff4500);
    ? ? ? ? ? ? -webkit-background-clip: text;
    ? ? ? ? ? ? background-clip: text;
    ? ? ? ? ? ? color: transparent;
    ? ? ? ? ? ? animation: titleGlow 2s infinite alternate;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? @keyframes titleGlow {
    ? ? ? ? ? ? 0% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    ? ? ? ? ? ? 100% { text-shadow: 0 0 20px rgba(255, 140, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.6); }
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .subtitle {
    ? ? ? ? ? ? font-size: 1.2rem;
    ? ? ? ? ? ? opacity: 0.9;
    ? ? ? ? ? ? max-width: 700px;
    ? ? ? ? ? ? margin: 0 auto 30px;
    ? ? ? ? ? ? line-height: 1.6;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tabs {
    ? ? ? ? ? ? display: flex;
    ? ? ? ? ? ? justify-content: center;
    ? ? ? ? ? ? margin-bottom: 40px;
    ? ? ? ? ? ? flex-wrap: wrap;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tab-btn {
    ? ? ? ? ? ? background: rgba(255, 255, 255, 0.15);
    ? ? ? ? ? ? border: none;
    ? ? ? ? ? ? color: white;
    ? ? ? ? ? ? padding: 15px 35px;
    ? ? ? ? ? ? font-size: 1.2rem;
    ? ? ? ? ? ? border-radius: 50px;
    ? ? ? ? ? ? margin: 0 10px;
    ? ? ? ? ? ? cursor: pointer;
    ? ? ? ? ? ? transition: all 0.3s ease;
    ? ? ? ? ? ? backdrop-filter: blur(10px);
    ? ? ? ? ? ? border: 1px solid rgba(255, 255, 255, 0.2);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tab-btn:hover {
    ? ? ? ? ? ? background: rgba(255, 255, 255, 0.25);
    ? ? ? ? ? ? transform: translateY(-3px);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tab-btn.active {
    ? ? ? ? ? ? background: linear-gradient(45deg, #ff8c00, #ffd700);
    ? ? ? ? ? ? color: #1a2980;
    ? ? ? ? ? ? font-weight: bold;
    ? ? ? ? ? ? box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .content-section {
    ? ? ? ? ? ? display: none;
    ? ? ? ? ? ? animation: fadeIn 0.8s ease;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? @keyframes fadeIn {
    ? ? ? ? ? ? from { opacity: 0; transform: translateY(20px); }
    ? ? ? ? ? ? to { opacity: 1; transform: translateY(0); }
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .content-section.active {
    ? ? ? ? ? ? display: block;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .countdown {
    ? ? ? ? ? ? background: rgba(0, 0, 0, 0.2);
    ? ? ? ? ? ? border-radius: 20px;
    ? ? ? ? ? ? padding: 30px;
    ? ? ? ? ? ? margin: 30px auto;
    ? ? ? ? ? ? max-width: 800px;
    ? ? ? ? ? ? text-align: center;
    ? ? ? ? ? ? backdrop-filter: blur(10px);
    ? ? ? ? ? ? border: 1px solid rgba(255, 255, 255, 0.1);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .countdown-title {
    ? ? ? ? ? ? font-size: 1.8rem;
    ? ? ? ? ? ? margin-bottom: 25px;
    ? ? ? ? ? ? color: #ffd700;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .timer {
    ? ? ? ? ? ? display: flex;
    ? ? ? ? ? ? justify-content: center;
    ? ? ? ? ? ? gap: 20px;
    ? ? ? ? ? ? flex-wrap: wrap;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .timer-box {
    ? ? ? ? ? ? background: rgba(255, 255, 255, 0.1);
    ? ? ? ? ? ? border-radius: 15px;
    ? ? ? ? ? ? padding: 20px 15px;
    ? ? ? ? ? ? min-width: 120px;
    ? ? ? ? ? ? box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    ? ? ? ? ? ? transition: transform 0.3s ease;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .timer-box:hover {
    ? ? ? ? ? ? transform: translateY(-10px);
    ? ? ? ? ? ? background: rgba(255, 255, 255, 0.2);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .timer-value {
    ? ? ? ? ? ? font-size: 3.5rem;
    ? ? ? ? ? ? font-weight: bold;
    ? ? ? ? ? ? color: #ffd700;
    ? ? ? ? ? ? text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .timer-label {
    ? ? ? ? ? ? font-size: 1.1rem;
    ? ? ? ? ? ? margin-top: 10px;
    ? ? ? ? ? ? opacity: 0.8;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .motivational-section {
    ? ? ? ? ? ? display: grid;
    ? ? ? ? ? ? grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    ? ? ? ? ? ? gap: 25px;
    ? ? ? ? ? ? margin: 40px 0;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .card {
    ? ? ? ? ? ? background: rgba(255, 255, 255, 0.1);
    ? ? ? ? ? ? border-radius: 20px;
    ? ? ? ? ? ? padding: 30px;
    ? ? ? ? ? ? text-align: center;
    ? ? ? ? ? ? transition: all 0.4s ease;
    ? ? ? ? ? ? backdrop-filter: blur(10px);
    ? ? ? ? ? ? border: 1px solid rgba(255, 255, 255, 0.1);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .card:hover {
    ? ? ? ? ? ? transform: translateY(-10px);
    ? ? ? ? ? ? background: rgba(255, 255, 255, 0.2);
    ? ? ? ? ? ? box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .card i {
    ? ? ? ? ? ? font-size: 3.5rem;
    ? ? ? ? ? ? color: #ffd700;
    ? ? ? ? ? ? margin-bottom: 20px;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .card h3 {
    ? ? ? ? ? ? font-size: 1.8rem;
    ? ? ? ? ? ? margin-bottom: 15px;
    ? ? ? ? ? ? color: #ffd700;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .card p {
    ? ? ? ? ? ? line-height: 1.8;
    ? ? ? ? ? ? font-size: 1.1rem;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .quote {
    ? ? ? ? ? ? font-style: italic;
    ? ? ? ? ? ? margin-top: 15px;
    ? ? ? ? ? ? padding: 15px;
    ? ? ? ? ? ? border-left: 3px solid #ffd700;
    ? ? ? ? ? ? background: rgba(0, 0, 0, 0.1);
    ? ? ? ? ? ? border-radius: 0 10px 10px 0;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tips-section {
    ? ? ? ? ? ? background: rgba(0, 0, 0, 0.2);
    ? ? ? ? ? ? border-radius: 20px;
    ? ? ? ? ? ? padding: 40px;
    ? ? ? ? ? ? margin: 50px 0;
    ? ? ? ? ? ? backdrop-filter: blur(10px);
    ? ? ? ? ? ? border: 1px solid rgba(255, 255, 255, 0.1);
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .section-title {
    ? ? ? ? ? ? text-align: center;
    ? ? ? ? ? ? font-size: 2.2rem;
    ? ? ? ? ? ? margin-bottom: 30px;
    ? ? ? ? ? ? color: #ffd700;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tips-grid {
    ? ? ? ? ? ? display: grid;
    ? ? ? ? ? ? grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    ? ? ? ? ? ? gap: 25px;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tip-item {
    ? ? ? ? ? ? background: rgba(255, 255, 255, 0.1);
    ? ? ? ? ? ? border-radius: 15px;
    ? ? ? ? ? ? padding: 25px;
    ? ? ? ? ? ? display: flex;
    ? ? ? ? ? ? align-items: flex-start;
    ? ? ? ? ? ? gap: 15px;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tip-item i {
    ? ? ? ? ? ? color: #ffd700;
    ? ? ? ? ? ? font-size: 1.8rem;
    ? ? ? ? ? ? min-width: 40px;
    ? ? ? ? ? ? padding-top: 5px;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .tip-content h4 {
    ? ? ? ? ? ? font-size: 1.4rem;
    ? ? ? ? ? ? margin-bottom: 10px;
    ? ? ? ? ? ? color: #ffd700;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? .encouragement {
    ? ? ? ? ? ? text-align: center;
    ? ? ? ? ? ? padding: 50px 20px;
    ? ? ? ? ? ? font-size: 2.2rem;
    ? ? ? ? ? ? font-weight: bold;
    ? ? ? ? ? ? margin: 40px 0;
    ? ? ? ? ? ? background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
    ? ? ? ? ? ? border-radius: 20px;
    ? ? ? ? ? ? animation: pulse 2s infinite;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? @keyframes pulse {
    ? ? ? ? ? ? 0% { transform: scale(1); }
    ? ? ? ? ? ? 50% { transform: scale(1.02); }
    ? ? ? ? ? ? 100% { transform: scale(1); }
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? footer {
    ? ? ? ? ? ? text-align: center;
    ? ? ? ? ? ? padding: 30px;
    ? ? ? ? ? ? margin-top: 40px;
    ? ? ? ? ? ? font-size: 1.1rem;
    ? ? ? ? ? ? opacity: 0.8;
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? /* 響應式設計 */
    ? ? ? ? @media (max-width: 768px) {
    ? ? ? ? ? ? h1 {
    ? ? ? ? ? ? ? ? font-size: 2.5rem;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? .tab-btn {
    ? ? ? ? ? ? ? ? padding: 12px 25px;
    ? ? ? ? ? ? ? ? font-size: 1rem;
    ? ? ? ? ? ? ? ? margin-bottom: 10px;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? .timer-box {
    ? ? ? ? ? ? ? ? min-width: 80px;
    ? ? ? ? ? ? ? ? padding: 15px 10px;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? .timer-value {
    ? ? ? ? ? ? ? ? font-size: 2.2rem;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? .encouragement {
    ? ? ? ? ? ? ? ? font-size: 1.6rem;
    ? ? ? ? ? ? ? ? padding: 30px 15px;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? .tips-section {
    ? ? ? ? ? ? ? ? padding: 25px;
    ? ? ? ? ? ? }
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? @media (max-width: 480px) {
    ? ? ? ? ? ? h1 {
    ? ? ? ? ? ? ? ? font-size: 2rem;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? .timer-box {
    ? ? ? ? ? ? ? ? min-width: 70px;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? .timer-value {
    ? ? ? ? ? ? ? ? font-size: 1.8rem;
    ? ? ? ? ? ? }
    ? ? ? ? }
    ? ? </style>
    </head>
    <body>
    ? ? <div class="container">
    ? ? ? ? <header>
    ? ? ? ? ? ? <h1><i class="fas fa-graduation-cap"></i> 高考加油 & 中考加油</h1>
    ? ? ? ? ? ? <p class="subtitle">青春無悔,奮斗最美!無論高考還是中考,都是人生的重要里程碑。愿你以夢為馬,不負韶華,全力以赴,創造屬于自己的輝煌!</p>
    ? ? ? ? ? ??
    ? ? ? ? ? ? <div class="tabs">
    ? ? ? ? ? ? ? ? <button class="tab-btn active" data-tab="gaokao">高考加油</button>
    ? ? ? ? ? ? ? ? <button class="tab-btn" data-tab="zhongkao">中考加油</button>
    ? ? ? ? ? ? </div>
    ? ? ? ? </header>
    ? ? ? ??
    ? ? ? ? <!-- 高考內容部分 -->
    ? ? ? ? <section id="gaokao-content" class="content-section active">
    ? ? ? ? ? ? <div class="countdown">
    ? ? ? ? ? ? ? ? <h2 class="countdown-title">2025年高考倒計時</h2>
    ? ? ? ? ? ? ? ? <div class="timer">
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="days-gaokao">365</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">天</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="hours-gaokao">00</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">小時</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="minutes-gaokao">00</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">分鐘</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="seconds-gaokao">00</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">秒鐘</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? </div>
    ? ? ? ? ? ??
    ? ? ? ? ? ? <div class="motivational-section">
    ? ? ? ? ? ? ? ? <div class="card">
    ? ? ? ? ? ? ? ? ? ? <i class="fas fa-brain"></i>
    ? ? ? ? ? ? ? ? ? ? <h3>智慧備考</h3>
    ? ? ? ? ? ? ? ? ? ? <p>科學規劃時間,掌握核心考點,理解重于記憶。制定合理的復習計劃,注重知識體系的構建。</p>
    ? ? ? ? ? ? ? ? ? ? <p class="quote">"博觀而約取,厚積而薄發。" — 蘇軾</p>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? <div class="card">
    ? ? ? ? ? ? ? ? ? ? <i class="fas fa-heart"></i>
    ? ? ? ? ? ? ? ? ? ? <h3>心態調整</h3>
    ? ? ? ? ? ? ? ? ? ? <p>保持平和心態,相信自己的努力。適度的壓力是動力,過度的焦慮是阻力。學會放松,保持自信。</p>
    ? ? ? ? ? ? ? ? ? ? <p class="quote">"非淡泊無以明志,非寧靜無以致遠。" — 諸葛亮</p>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? <div class="card">
    ? ? ? ? ? ? ? ? ? ? <i class="fas fa-running"></i>
    ? ? ? ? ? ? ? ? ? ? <h3>堅持到底</h3>
    ? ? ? ? ? ? ? ? ? ? <p>高考是場馬拉松,堅持到最后才是勝利。每天進步一點點,積少成多,終將迎來質的飛躍。</p>
    ? ? ? ? ? ? ? ? ? ? <p class="quote">"路漫漫其修遠兮,吾將上下而求索。" — 屈原</p>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? </div>
    ? ? ? ? ? ??
    ? ? ? ? ? ? <div class="encouragement">
    ? ? ? ? ? ? ? ? 乾坤未定,你我皆是黑馬!高考必勝!
    ? ? ? ? ? ? </div>
    ? ? ? ? ? ??
    ? ? ? ? ? ? <div class="tips-section">
    ? ? ? ? ? ? ? ? <h2 class="section-title">高考備考小貼士</h2>
    ? ? ? ? ? ? ? ? <div class="tips-grid">
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-book"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>回歸基礎</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>最后階段要回歸課本,鞏固基礎知識,確保基礎題不丟分。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-clock"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>時間管理</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>模擬真實考試環境進行限時訓練,提高答題速度和準確率。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-utensils"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>健康飲食</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>保持均衡飲食,多吃蔬菜水果,適量補充蛋白質,避免油膩食物。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-bed"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>規律作息</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>調整生物鐘,保證充足睡眠,確保考試時段精力充沛。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? </div>
    ? ? ? ? </section>
    ? ? ? ??
    ? ? ? ? <!-- 中考內容部分 -->
    ? ? ? ? <section id="zhongkao-content" class="content-section">
    ? ? ? ? ? ? <div class="countdown">
    ? ? ? ? ? ? ? ? <h2 class="countdown-title">2025年中考倒計時</h2>
    ? ? ? ? ? ? ? ? <div class="timer">
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="days-zhongkao">120</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">天</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="hours-zhongkao">00</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">小時</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="minutes-zhongkao">00</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">分鐘</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? <div class="timer-box">
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-value" id="seconds-zhongkao">00</div>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="timer-label">秒鐘</div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? </div>
    ? ? ? ? ? ??
    ? ? ? ? ? ? <div class="motivational-section">
    ? ? ? ? ? ? ? ? <div class="card">
    ? ? ? ? ? ? ? ? ? ? <i class="fas fa-lightbulb"></i>
    ? ? ? ? ? ? ? ? ? ? <h3>高效學習</h3>
    ? ? ? ? ? ? ? ? ? ? <p>掌握學習方法比死記硬背更重要。學會總結歸納,建立知識網絡,提高學習效率。</p>
    ? ? ? ? ? ? ? ? ? ? <p class="quote">"學而不思則罔,思而不學則殆。" — 孔子</p>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? <div class="card">
    ? ? ? ? ? ? ? ? ? ? <i class="fas fa-balance-scale"></i>
    ? ? ? ? ? ? ? ? ? ? <h3>均衡發展</h3>
    ? ? ? ? ? ? ? ? ? ? <p>不要偏科,各科均衡發展才能取得理想成績。合理安排各科復習時間,揚長補短。</p>
    ? ? ? ? ? ? ? ? ? ? <p class="quote">"不積跬步,無以至千里;不積小流,無以成江海。" — 荀子</p>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? <div class="card">
    ? ? ? ? ? ? ? ? ? ? <i class="fas fa-users"></i>
    ? ? ? ? ? ? ? ? ? ? <h3>團隊協作</h3>
    ? ? ? ? ? ? ? ? ? ? <p>與同學組成學習小組,互相討論、互相提問,共同進步。分享學習心得,解決疑難問題。</p>
    ? ? ? ? ? ? ? ? ? ? <p class="quote">"獨學而無友,則孤陋而寡聞。" — 《禮記》</p>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? </div>
    ? ? ? ? ? ??
    ? ? ? ? ? ? <div class="encouragement">
    ? ? ? ? ? ? ? ? 今日拼搏努力,他朝誰與爭鋒!中考加油!
    ? ? ? ? ? ? </div>
    ? ? ? ? ? ??
    ? ? ? ? ? ? <div class="tips-section">
    ? ? ? ? ? ? ? ? <h2 class="section-title">中考備考小貼士</h2>
    ? ? ? ? ? ? ? ? <div class="tips-grid">
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-pencil-alt"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>規范答題</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>注意答題規范,書寫工整,步驟清晰,避免不必要的扣分。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-redo"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>錯題整理</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>建立錯題本,定期回顧,分析錯誤原因,避免重復犯錯。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-dumbbell"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>適度運動</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>每天保持適量運動,如散步、慢跑等,緩解壓力,增強體質。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? ? ? <div class="tip-item">
    ? ? ? ? ? ? ? ? ? ? ? ? <i class="fas fa-mobile-alt"></i>
    ? ? ? ? ? ? ? ? ? ? ? ? <div class="tip-content">
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>減少干擾</h4>
    ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>學習時遠離手機等電子設備,創造安靜的學習環境,提高專注力。</p>
    ? ? ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? ? ? </div>
    ? ? ? ? ? ? </div>
    ? ? ? ? </section>
    ? ? ? ??
    ? ? ? ? <footer>
    ? ? ? ? ? ? <p>? 2025 加油吧!學子們 | 高考中考加油專題</p>
    ? ? ? ? ? ? <p>愿每一位學子都能發揮最佳水平,實現心中夢想!</p>
    ? ? ? ? </footer>
    ? ? </div>
    ? ??
    ? ? <script>
    ? ? ? ? // 切換標簽頁
    ? ? ? ? document.querySelectorAll('.tab-btn').forEach(button => {
    ? ? ? ? ? ? button.addEventListener('click', () => {
    ? ? ? ? ? ? ? ? // 更新按鈕狀態
    ? ? ? ? ? ? ? ? document.querySelectorAll('.tab-btn').forEach(btn => {
    ? ? ? ? ? ? ? ? ? ? btn.classList.remove('active');
    ? ? ? ? ? ? ? ? });
    ? ? ? ? ? ? ? ? button.classList.add('active');
    ? ? ? ? ? ? ? ??
    ? ? ? ? ? ? ? ? // 顯示對應內容
    ? ? ? ? ? ? ? ? const tabId = button.getAttribute('data-tab');
    ? ? ? ? ? ? ? ? document.querySelectorAll('.content-section').forEach(section => {
    ? ? ? ? ? ? ? ? ? ? section.classList.remove('active');
    ? ? ? ? ? ? ? ? });
    ? ? ? ? ? ? ? ? document.getElementById(`${tabId}-content`).classList.add('active');
    ? ? ? ? ? ? });
    ? ? ? ? });
    ? ? ? ??
    ? ? ? ? // 倒計時函數
    ? ? ? ? function updateCountdown(targetDate, daysId, hoursId, minutesId, secondsId) {
    ? ? ? ? ? ? const now = new Date().getTime();
    ? ? ? ? ? ? const distance = targetDate - now;
    ? ? ? ? ? ??
    ? ? ? ? ? ? if (distance < 0) {
    ? ? ? ? ? ? ? ? // 考試已結束
    ? ? ? ? ? ? ? ? document.getElementById(daysId).textContent = "0";
    ? ? ? ? ? ? ? ? document.getElementById(hoursId).textContent = "0";
    ? ? ? ? ? ? ? ? document.getElementById(minutesId).textContent = "0";
    ? ? ? ? ? ? ? ? document.getElementById(secondsId).textContent = "0";
    ? ? ? ? ? ? ? ? return;
    ? ? ? ? ? ? }
    ? ? ? ? ? ??
    ? ? ? ? ? ? // 計算天、時、分、秒
    ? ? ? ? ? ? const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    ? ? ? ? ? ? const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    ? ? ? ? ? ? const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    ? ? ? ? ? ? const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    ? ? ? ? ? ??
    ? ? ? ? ? ? // 更新顯示
    ? ? ? ? ? ? document.getElementById(daysId).textContent = days;
    ? ? ? ? ? ? document.getElementById(hoursId).textContent = hours.toString().padStart(2, '0');
    ? ? ? ? ? ? document.getElementById(minutesId).textContent = minutes.toString().padStart(2, '0');
    ? ? ? ? ? ? document.getElementById(secondsId).textContent = seconds.toString().padStart(2, '0');
    ? ? ? ? }
    ? ? ? ??
    ? ? ? ? // 設置高考日期 (2025年6月7日)
    ? ? ? ? const gaokaoDate = new Date("June 7, 2025 09:00:00").getTime();
    ? ? ? ? // 設置中考日期 (2025年6月20日)
    ? ? ? ? const zhongkaoDate = new Date("June 20, 2025 09:00:00").getTime();
    ? ? ? ??
    ? ? ? ? // 初始化倒計時
    ? ? ? ? updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");
    ? ? ? ? updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");
    ? ? ? ??
    ? ? ? ? // 每秒更新一次倒計時
    ? ? ? ? setInterval(() => {
    ? ? ? ? ? ? updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");
    ? ? ? ? ? ? updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");
    ? ? ? ? }, 1000);
    ? ? ? ??
    ? ? ? ? // 添加卡片懸停效果
    ? ? ? ? document.querySelectorAll('.card').forEach(card => {
    ? ? ? ? ? ? card.addEventListener('mouseenter', () => {
    ? ? ? ? ? ? ? ? card.style.transform = 'translateY(-10px)';
    ? ? ? ? ? ? });
    ? ? ? ? ? ??
    ? ? ? ? ? ? card.addEventListener('mouseleave', () => {
    ? ? ? ? ? ? ? ? card.style.transform = 'translateY(0)';
    ? ? ? ? ? ? });
    ? ? ? ? });
    ? ? </script>
    </body>
    </html>

  • 功能亮點

  • 雙主題設計:通過標簽頁切換高考和中高考內容

  • 動態倒計時

    • 高考倒計時(2025年6月7日)

    • 中考倒計時(2025年6月20日)

  • 勵志內容

    • 三個激勵卡片(智慧備考、心態調整、堅持到底)

    • 備考小貼士板塊

    • 鼓舞人心的名言名句

  • 視覺設計

    • 藍金色漸變主題,象征希望與成功

    • 卡片懸停動畫效果

    • 標題發光動畫

    • 響應式設計,適配各種設備

  • 交互體驗

    • 平滑的標簽切換動畫

    • 卡片懸停效果

    • 動態更新的倒計時

    • 最后希望所有高考生和中考生旗開得勝,拔得頭魁

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/82791.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/82791.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/82791.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

What is Predictive Maintenance (PdM)? Learn How Industrial IoT Enables PdM

文章大綱 從預防性維護到預測性維護服務的轉變傳統預防性維護的局限性預測性維護的定義工業物聯網(IIoT)如何助力預測性維護預測性維護帶來的成本效益實施預測性維護面臨的挑戰企業轉向預測性維護的原因參考文獻大家好!今天,讓我們一起深入了解一下預測性維護技術。它正在徹…

CCPC shandong 2025 G

題目鏈接&#xff1a;https://codeforces.com/gym/105930/problem/G 題目背景&#xff1a; n 名工人加工 m 個工件&#xff0c;第 i 個工件在第 ti 分鐘的開頭加入 工人 wi 的收件箱。 每分鐘&#xff0c;工人從收件箱里拿出一個工件&#xff0c;完成加工后放入下 一個工人的收…

UE路徑追蹤Path Tracing和Lumen的區別

在Unreal Engine&#xff08;UE&#xff0c;虛幻引擎&#xff09;中&#xff0c;Path Tracing 和 Lumen 是兩種不同的全局光照&#xff08;Global Illumination, GI&#xff09;和反射技術&#xff0c;各自適用于不同的使用場景。以下是它們的主要區別&#xff1a; &#x1f31…

JaCoCo 是什么

JaCoCo&#xff08;Java Code Coverage&#xff09;是一款廣泛使用的 Java 代碼覆蓋率工具&#xff0c;用于分析測試用例對項目代碼的覆蓋程度&#xff0c;幫助開發者識別未被測試的代碼區域&#xff0c;從而提升軟件質量。它通常與 JUnit、TestNG 等測試框架及 Maven、Gradle …

火山引擎扣子系列

您提到的“火山引擎扣子系列”指的應該是 **火山引擎推出的智能AI對話開發與應用平臺——Coze&#xff08;中文名&#xff1a;扣子&#xff09;**。這是一個由字節跳動旗下火山引擎開發的、面向開發者和非技術用戶的**低代碼/無代碼AI Bot開發平臺**&#xff0c;旨在幫助用戶快…

OpenLayers 加載ArcGIS瓦片數據

注&#xff1a;當前使用的是 ol 5.3.0 版本&#xff0c;天地圖使用的key請到天地圖官網申請&#xff0c;并替換為自己的key 隨著GIS應用的不斷發展&#xff0c;Web地圖也越來越豐富&#xff0c;除了像ESRI、超圖、中地數碼這樣GIS廠商有各自的數據源格式&#xff0c;也有Google…

大模型是什么?

大模型&#xff0c;英文名叫Large Model&#xff0c;也被稱為基礎模型&#xff08;Foundation Model&#xff09;。我們通常說的大模型&#xff0c;主要指的是其中最常用的一類——大語言模型&#xff08;Large Language Model&#xff0c;簡稱LLM&#xff09;。除此之外&#…

LLaMaFactory 微調QwenCoder模型

步驟一&#xff1a;準備LLamaFactory環境 首先,讓我們嘗試使用github的方式克隆倉庫: git config --global http.sslVerify false && git clone --depth 1 https://github.com/hiyouga/LLaMA-Factory.git # 創建新環境&#xff0c;指定 Python 版本&#xff08;以 3.…

【位運算】判斷字符是否唯?(easy)

33. 判斷字符是否唯?&#xff08;easy&#xff09; 題?描述&#xff1a;解法&#xff08;位圖的思想&#xff09;&#xff1a;C 算法代碼&#xff1a;Java 算法代碼&#xff1a; 題?鏈接&#xff1a;?試題 01.01. 判定字符是否唯? 題?描述&#xff1a; 實現?個算法&…

滿天星之canvas實現【canvas】

展示 文章目錄 展示Canvas 介紹【基礎】簡介兼容性關鍵特性注意事項應用場景&#xff1a;基本示例 滿天星代碼實現【重點】代碼解釋 全量代碼【來吧&#xff0c;盡情復制吧少年】html引入JS代碼 參考資源 Canvas 介紹【基礎】 簡介 Canvas是一個基于HTML5的繪圖技術&#xff0…

可視化提示詞(Prompt)在訓練過程中的優化過程:visualize_prompt_evolution

可視化提示詞(Prompt)在訓練過程中的優化過程:visualize_prompt_evolution 這個函數 visualize_prompt_evolution 的作用是可視化提示詞(Prompt)在訓練過程中的優化過程,通過對比每個訓練輪次(Epoch)的提示詞與初始提示詞的差異,直觀展示哪些Token被保留、哪些被修改…

2025 一帶一路暨金磚國家技能發展與技術創新大賽 第一屆“信創適配及安全管理賽項”樣題

2025 一帶一路暨金磚國家技能發展與技術創新大賽 第一屆“信創適配及安全管理賽項”樣題 模塊A-理論知識&#xff1a;模塊B-適配環境搭建&#xff1a;系統安裝與配置&#xff1a;DNS 服務配置&#xff1a;DNS 服務配置&#xff1a;CA 服務配置&#xff1a;Httpd 服務配置&#…

Qt Creator調用Python代碼

Qt Creator調用Python代碼 項目場景:現在我寫的Qt上位機,需要調用同事使用python寫的代碼,所以我需要一個整合,把同事的代碼融合進我的Qt工程里來。 所以,本篇記錄Qt Creator中調用Python的一種方法。 操作系統:windows 11 64位 Python使用的版本為 3.9.10,(安裝參…

【QQ音樂】sign簽名| data參數 | AES-GCM加密 | webpack(上)

1.目標 網址&#xff1a;https://y.qq.com/n/ryqq/toplist/26 切換榜單出現請求&#xff0c;可以看到sign和data是加密的 2.逆向分析 搜索sign: 可以看到sign P(n.data)&#xff0c;而n.data就是請求的加密data參數 data {"comm":{"cv":4747474,&qu…

uni-app(6):Vue3語法基礎下

1 列表渲染 1.1 在 v-for 里使用數組 v-for 指令可以實現基于一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法&#xff0c;其中 items 是源數據數組&#xff0c;而 item 則是被迭代的數組元素的別名。 在 v-for 塊中&#xff0c;我們可以訪問所有父…

STM32之SPI——外部FLASH和RFID

一、SPI協議的原理與應用 基本概念 串行外設接口SPI&#xff08;Serial Peripheral Interface&#xff09;是由美國摩托羅拉公司最先推出的一種同步串行傳輸規范&#xff0c;也是一種單片機外設芯片串行外設擴展接口。該接口是一種高速、全雙工、同步的通信總線&#xff0c;并…

51c視覺~3D~合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/13954440 #SceneTracker 在4D時空中追蹤萬物&#xff01;國防科大提出首個長時場景流估計方法 本篇分享 TPAMI 2025 論文??SceneTracker: Long-term Scene Flow Estimation Network??&#xff0c;國防科大提出首…

cf2059B

原題鏈接&#xff1a;https://codeforces.com/contest/2059/problem/B 題目背景&#xff1a; 將一個長度為 n 的數組 a 劃分為 k 個數組&#xff0c;再將所有偶數索引的數組合并成 b 數組&#xff0c;定義代價為 的最小索引 i &#xff0c;可得到的最小代價為多少。 思路&am…

爬蟲到智能數據分析:Bright Data × Kimi 智能洞察亞馬遜電商產品銷售潛力

前言 電商數據分析在現代商業中具有重要的戰略價值&#xff0c;通過對消費者行為、銷售趨勢、商品價格、庫存等數據的深入分析&#xff0c;企業能夠獲得對市場動態的精準洞察&#xff0c;優化運營決策&#xff0c;預測市場趨勢、優化廣告投放、提升供應鏈效率&#xff0c;并通…

從解決一個分享圖片生成的歷史bug出發,詳解LayoutInflater和View.post的工作原理

問題背景 最近在項目中遇到一個問題&#xff1a;在檔口分享功能中&#xff0c;需要動態生成一個分享圖片。代碼是這樣寫的&#xff1a; // 項目中的代碼 val shareView LayoutInflater.from(thisStallMainActivityV1).inflate(R.layout.share_header_stall_main_layout, nul…