“认识时间”知识卡片
以下是您所需的“认识时间”知识卡片的HTML代码。它采用现代简约风格，将钟面结构、时分秒关系、认读方法等核心知识点提炼为清晰的卡片模块，并包含“下载不含按钮版本”的功能，便于教学使用。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>认识时间 · 知识精准卡 | 二年级数学</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(145deg, #e9f0f5 0%, #d9e2ec 100%); font-family: 'Segoe UI', 'Roboto', 'Noto Sans', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } /* 卡片主容器 - 单列卡片设计 */ .knowledge-card { max-width: 820px; width: 100%; margin: 0 auto 2rem auto; background: #ffffff; border-radius: 2rem; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .knowledge-card:hover { transform: translateY(-4px); box-shadow: 0 25px 40px -14px rgba(0, 0, 0, 0.25); } /* 醒目标题区 */ .card-header { background: #1E3A5F; padding: 1.5rem 2rem; color: white; border-bottom: 4px solid #FFB74D; } .card-header h1 { font-size: 1.9rem; letter-spacing: -0.3px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 0.5rem; } .card-header h1 span { background: #FFB74D; color: #1E3A5F; font-size: 1rem; font-weight: 600; padding: 0.25rem 0.8rem; border-radius: 40px; letter-spacing: normal; } .subtitle { font-size: 1rem; opacity: 0.85; display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; font-weight: 400; } .subtitle i { font-style: normal; background: rgba(255,255,240,0.2); padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.85rem; } /* 核心概念简报 */ .core-brief { background: #FEF7E8; padding: 1.2rem 2rem; border-left: 6px solid #FFB74D; margin: 1.2rem 1.5rem 0 1.5rem; border-radius: 20px; font-weight: 500; font-size: 1rem; color: #2c3e2f; box-shadow: 0 2px 6px rgba(0,0,0,0.03); } .core-brief strong { color: #C4450C; } /* 内容区域 */ .card-content { padding: 1.2rem 1.8rem 2rem 1.8rem; } /* 模块样式 */ .section { margin-bottom: 1.8rem; } .section-title { font-size: 1.35rem; font-weight: 700; color: #1E3A5F; border-left: 5px solid #FFB74D; padding-left: 14px; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; } .section-title i { font-size: 1.4rem; } .grid-list { display: flex; flex-direction: column; gap: 0.9rem; } .list-item { display: flex; gap: 12px; align-items: flex-start; background: #F9FAFC; padding: 0.7rem 1rem; border-radius: 18px; transition: background 0.2s; } .list-item:hover { background: #F1F4F9; } .list-icon { font-size: 1.5rem; min-width: 36px; text-align: center; } .list-text { flex: 1; font-size: 0.98rem; line-height: 1.45; color: #1e2a3a; } .list-text strong { color: #C4450C; font-weight: 700; } .badge { background: #EFF3F8; border-radius: 30px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: #1E3A5F; display: inline-block; margin-right: 8px; } .highlight { background: #FFF1CF; padding: 0.1rem 0.3rem; border-radius: 12px; font-weight: 600; color: #B45F1B; } .example-box { background: #EFF7F0; border-radius: 1.2rem; padding: 1rem 1.3rem; margin-top: 0.5rem; border: 1px solid #C8E6C9; } .example-box p { margin-bottom: 0.5rem; font-weight: 500; } .time-tip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 0.8rem; } .tip-card { background: white; border-radius: 24px; padding: 0.7rem 1rem; flex: 1; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border: 1px solid #E2E8F0; } hr { margin: 1rem 0; border: none; height: 2px; background: linear-gradient(to right, #FFB74D, #E0E7EF); } .footer-note { text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: #5f7f9e; border-top: 1px dashed #DCE5EC; padding-top: 1rem; } /* 下载按钮区域 (仅原始页面显示) */ .download-area { text-align: center; margin-top: 0.5rem; margin-bottom: 1rem; } .btn-download { background: #1E3A5F; border: none; padding: 0.8rem 2rem; font-size: 1rem; font-weight: 600; color: white; border-radius: 60px; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; } .btn-download:hover { background: #FFB74D; color: #1E3A5F; transform: scale(1.02); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } @media (max-width: 600px) { .card-header h1 { font-size: 1.5rem; } .card-content { padding: 1rem 1.2rem 1.5rem 1.2rem; } .core-brief { margin: 1rem 1rem 0 1rem; padding: 0.8rem 1rem; } .section-title { font-size: 1.2rem; } .list-text { font-size: 0.9rem; } } </style></head><body> <!-- 知识卡片主体 - 下载时仅复制这部分（不含外部按钮） --> <div class="knowledge-card" id="knowledgeCard"> <div class="card-header"> <h1> ⏰ 时间在哪里 <span>第1课时 · 认识时间</span> </h1> <div class="subtitle"> <i>📐 人教版数学 二年级下册</i> <i>🎯 知识精准 · 重点聚焦 · 梯度明晰 · 学练无忧</i> </div> </div> <!-- 核心概念简明概述 --> <div class="core-brief"> 💡 核心概念：钟面就像时间魔法盘！<strong>时针短胖，分针细长，秒针跑最快</strong>。1时=60分，1分=60秒。认时间先看时针过几就是几时，再看分针走了多少小格就是几分。精准读时，做时间的小主人！ </div> <div class="card-content"> <!-- 一、钟面结构大揭秘 --> <div class="section"> <div class="section-title"> <i>🕰️</i> 1️⃣ 钟面结构 · 精准记忆 </div> <div class="grid-list"> <div class="list-item"> <div class="list-icon">🔢</div> <div class="list-text"><strong>大格与小格</strong>：钟面上有 <span class="highlight">12 个大格</span>，每个大格里有 <span class="highlight">5 个小格</span>，一共 <strong class="highlight">60 个小格</strong>。</div> </div> <div class="list-item"> <div class="list-icon">⏲️</div> <div class="list-text"><strong>三兄弟指针</strong>：<strong>时针</strong>（短粗，走得慢）、<strong>分针</strong>（细长，走一格是1分）、<strong>秒针</strong>（最细最长，滴答一下1秒）。</div> </div> <div class="list-item"> <div class="list-icon">🧩</div> <div class="list-text"><strong>运动规律</strong>：分针跑一圈（60小格），时针走1大格 → 1时 = 60分；秒针跑一圈，分针走1小格 → 1分 = 60秒。</div> </div> </div> </div> <!-- 二、时分秒关系 · 进率重难点 --> <div class="section"> <div class="section-title"> <i>⚙️</i> 2️⃣ 时分秒 · 进率关系 </div> <div class="example-box" style="background:#FDF6E3;"> <p>📌 <strong>必背公式（单位换算小口诀）</strong></p> <div class="time-tip"> <div class="tip-card">🕐 <strong>1时 = 60分</strong><br>🧮 2时 = 120分</div> <div class="tip-card">⏱️ <strong>1分 = 60秒</strong><br>🧮 3分 = 180秒</div> <div class="tip-card">⏲️ 半时 = 30分<br>一刻 = 15分</div> </div> <p style="margin-top: 8px; font-size:0.9rem;">✨ <strong>趣味感知</strong>：一节课+课间≈1小时；眨一下眼≈1秒；深呼吸一次≈3~5秒。</p> </div> </div> <!-- 三、认读方法 · 几时几分精准读法 ⭐重点聚焦 --> <div class="section"> <div class="section-title"> <i>🔍</i> 3️⃣ 时间认读方法 · 分步走 </div> <div class="grid-list"> <div class="list-item"> <div class="list-icon">①</div> <div class="list-text"><strong>“时针看数定几时”</strong>：时针走过数字几，就是“几时多”（时针在4~5之间 → 4时多）。</div> </div> <div class="list-item"> <div class="list-icon">②</div> <div class="list-text"><strong>“分针数格算几分”</strong>：从12开始，顺时针数分针指向的小格数，或者用<span class="highlight">“数字×5”法</span>（分针指向数字n → n×5分钟）。</div> </div> <div class="list-item"> <div class="list-icon">✍️</div> <div class="list-text"><strong>规范写法</strong>：<br>汉字表示法：<span class="highlight">4时15分</span> 数字表示法：<span class="highlight">4:15</span> （注意“:”前面是时，后面是分，两位数表示分）。</div> </div> </div> <!-- 重点难点突破 --> <div class="example-box" style="margin-top: 12px; background:#EBF2FA;"> <p>⚠️ <strong>易错点睛·突破难点</strong> —— “几时多”分钟认读</p> <ul style="margin-left: 1.5rem; line-height: 1.5;"> <li>✔️ 分针指向<strong>刻度数字</strong>：数字X分钟数 = X × 5 （例如分针指向7 → 35分）</li> <li>✔️ 时针“看起来快到下一数”但没超过 → 依然读较小数字。例：时针在9和10中间，靠近10但没到 → 还是9时多。</li> <li>✔️ 分针指向12 → 整时（几时整）；分针指向6 → 半时（30分）。</li> </ul> </div> </div> <!-- 四、经典例子·生活应用（学练结合） --> <div class="section"> <div class="section-title"> <i>📚</i> 4️⃣ 学以致用 · 生活小实例 </div> <div class="grid-list"> <div class="list-item"> <div class="list-icon">🌅</div> <div class="list-text"><strong>例1 早上起床</strong>：时针刚过7，分针指向数字2 → 分针2×5=10分 → <strong>7时10分</strong>（该去上学啦！）</div> </div> <div class="list-item"> <div class="list-icon">📖</div> <div class="list-text"><strong>例2 课间休息</strong>：时针在9和10之间，分针指向8 → 8×5=40分 → <strong>9时40分</strong>（还有20分钟就下第二节课～）</div> </div> <div class="list-item"> <div class="list-icon">🍚</div> <div class="list-text"><strong>例3 吃晚饭时间</strong>：时针指向6过一点，分针指向11 → 11×5=55分 → <strong>6时55分</strong>（快7点啦）。</div> </div> </div> <div class="example-box" style="background:#F0F7FF; margin-top: 6px;"> <p>🎯 <strong>巧记口诀（帮助秒懂）</strong></p> <p style="font-size: 0.95rem; font-weight:500;">“时针短胖走过几，就是几时别忘记；<br>分针长个跑格子，数数乘法算仔细；<br>一大格五分钟，小格一格一分钟；<br>时与分，60亲，珍惜时间我最行！”</p> </div> </div> <!-- 五、素养提升+量感培养 --> <div class="section"> <div class="section-title"> <i>🧠</i> 5️⃣ 核心素养 · 时间小管家 </div> <div class="grid-list"> <div class="list-item"> <div class="list-icon">⏳</div> <div class="list-text"><strong>量感体验</strong>：体验1分钟能写多少个字？1秒钟拍手一次，感受1小时有多长。建立时间“厚薄感”，养成守时好习惯。</div> </div> <div class="list-item"> <div class="list-icon">📅</div> <div class="list-text"><strong>应用意识</strong>：根据课程表或作息表，用刚学的认读方法说出“上午第二节课下课时间”“放学时间”，做时间规划师。</div> </div> <div class="list-item"> <div class="list-icon">🌟</div> <div class="list-text"><strong>数学抽象+运算</strong>：将指针运动抽象为时分秒进率，熟练换算如 120分=( )时，培养逻辑思维。</div> </div> </div> </div> <!-- 教学重难点加注标签 --> <hr> <div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 8px;"> <div><span class="badge">⭐ 教学重点</span> 钟面结构、时分秒进率、认读与书写</div> <div><span class="badge">⚠️ 教学难点</span> 准确认读“几时多”的分针分钟数 & 进率理解</div> <div><span class="badge">🎓 学法建议</span> 动手拨钟面，同桌互考认读游戏</div> </div> <div class="footer-note"> 🌟 知识精准·重点聚焦 · 结合人教版新教材设计 | 快乐学时间，做时间的小主人 </div> </div> </div> <!-- 下载按钮区域（原始页面显示，下载版本里不包含此区域） --> <div class="download-area" id="downloadButtonArea"> <button class="btn-download" id="downloadBtn">📥 下载本知识卡片（不含按钮版）</button> <p style="font-size: 0.7rem; color: #3f5c7a; margin-top: 8px;">✨ 点击下载完整卡片，保存后打开即可复习，无下载按钮，清爽学习</p> </div> <script> (function() { const downloadBtn = document.getElementById('downloadBtn'); if (!downloadBtn) return; // 获取主体卡片元素 const cardElement = document.getElementById('knowledgeCard'); if (!cardElement) return; // 获取页面样式 (内联style已经足够，但为了确保百分百还原，获取所有相关样式) // 由于所有样式都是通过内联style标签定义的，我们直接提取页面中所有style标签内容 const getAllStyles = () => { let styleContent = ''; const styleNodes = document.querySelectorAll('style'); styleNodes.forEach((styleTag) => { styleContent += styleTag.innerHTML; }); return styleContent; }; // 构建干净的HTML文档，不包含任何下载按钮区域及相关额外按钮容器 const buildDownloadHTML = () => { // 克隆卡片节点（深克隆，保留所有内容和事件无关的dom） const cardClone = cardElement.cloneNode(true); // 确保克隆的卡片内部不残留任何按钮（卡片内部本来就没有下载按钮，但为了防止万一有多余id污染不影响） // 同时移除可能被附加的按钮区域脚本，无干扰 // 注意：卡片内部没有任何 .download-area 或 button 类下载相关，因此安全。 // 获取样式 const styles = getAllStyles(); // 构建完整的html结构 return `<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>认识时间 · 知识精卡 | 人教版数学二年级下册</title> <style> /* 完全复制原始页面的样式，确保卡片显示一致 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(145deg, #e9f0f5 0%, #d9e2ec 100%); font-family: 'Segoe UI', 'Roboto', 'Noto Sans', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } /* 保证卡片样式和原始版本相同 */ .knowledge-card { max-width: 820px; width: 100%; margin: 0 auto; background: #ffffff; border-radius: 2rem; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; } .card-header { background: #1E3A5F; padding: 1.5rem 2rem; color: white; border-bottom: 4px solid #FFB74D; } .card-header h1 { font-size: 1.9rem; letter-spacing: -0.3px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 0.5rem; } .card-header h1 span { background: #FFB74D; color: #1E3A5F; font-size: 1rem; font-weight: 600; padding: 0.25rem 0.8rem; border-radius: 40px; } .subtitle { font-size: 1rem; opacity: 0.85; display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; } .subtitle i { background: rgba(255,255,240,0.2); padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.85rem; font-style: normal; } .core-brief { background: #FEF7E8; padding: 1.2rem 2rem; border-left: 6px solid #FFB74D; margin: 1.2rem 1.5rem 0 1.5rem; border-radius: 20px; font-weight: 500; font-size: 1rem; color: #2c3e2f; } .core-brief strong { color: #C4450C; } .card-content { padding: 1.2rem 1.8rem 2rem 1.8rem; } .section { margin-bottom: 1.8rem; } .section-title { font-size: 1.35rem; font-weight: 700; color: #1E3A5F; border-left: 5px solid #FFB74D; padding-left: 14px; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; } .grid-list { display: flex; flex-direction: column; gap: 0.9rem; } .list-item { display: flex; gap: 12px; align-items: flex-start; background: #F9FAFC; padding: 0.7rem 1rem; border-radius: 18px; } .list-icon { font-size: 1.5rem; min-width: 36px; text-align: center; } .list-text { flex: 1; font-size: 0.98rem; line-height: 1.45; color: #1e2a3a; } .list-text strong { color: #C4450C; } .highlight { background: #FFF1CF; padding: 0.1rem 0.3rem; border-radius: 12px; font-weight: 600; color: #B45F1B; } .example-box { background: #EFF7F0; border-radius: 1.2rem; padding: 1rem 1.3rem; margin-top: 0.5rem; border: 1px solid #C8E6C9; } .time-tip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 0.8rem; } .tip-card { background: white; border-radius: 24px; padding: 0.7rem 1rem; flex: 1; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.03); border: 1px solid #E2E8F0; } hr { margin: 1rem 0; border: none; height: 2px; background: linear-gradient(to right, #FFB74D, #E0E7EF); } .badge { background: #EFF3F8; border-radius: 30px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: #1E3A5F; display: inline-block; margin-right: 8px; } .footer-note { text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: #5f7f9e; border-top: 1px dashed #DCE5EC; padding-top: 1rem; } @media (max-width: 600px) { .card-header h1 { font-size: 1.5rem; } .card-content { padding: 1rem 1.2rem 1.5rem 1.2rem; } .core-brief { margin: 1rem 1rem 0 1rem; padding: 0.8rem 1rem; } .section-title { font-size: 1.2rem; } .list-text { font-size: 0.9rem; } } </style> </head> <body> ${cardClone.outerHTML} </body> </html>`; }; downloadBtn.addEventListener('click', () => { const fullHtml = buildDownloadHTML(); // 创建blob并下载 const blob = new Blob([fullHtml], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'renshi_shijian_knowledge_card.html'; // 下载文件名 document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); })(); </script></body></html>
10个月宝宝每天需要喝多少奶粉？
