健康生活的html动画教学文档

原创于 2026-05-15 19:15:00 发布 · 30 阅读
本内容遵循CC 4.0 BY-SA版权协议
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哆啦A梦的健康生活课堂</title>
    <style>
        body {
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
            background-color: #f0f8ff;
            margin: 0;
            padding: 0;
            color: #333;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            background-color: #00b0f0;
            color: white;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        h1 {
            margin: 0;
            font-size: 2.2em;
        }
        
        .character {
            width: 150px;
            height: 150px;
            margin: 0 auto;
            background-image: url('https://example.com/doraemon.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        .lesson {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .lesson:hover {
            transform: scale(1.02);
        }
        
        h2 {
            color: #ff6b00;
            border-bottom: 2px dashed #ff6b00;
            padding-bottom: 5px;
        }
        
        .tip {
            background-color: #fffacd;
            border-left: 5px solid #ffd700;
            padding: 10px;
            margin: 10px 0;
            border-radius: 0 5px 5px 0;
        }
        
        .activity {
            background-color: #e6f7ff;
            border: 2px dashed #00b0f0;
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
        }
        
        button {
            background-color: #ff6b00;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #ff8c00;
        }
        
        .progress-container {
            width: 100%;
            background-color: #ddd;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .progress-bar {
            height: 20px;
            background-color: #4CAF50;
            border-radius: 10px;
            width: 0%;
            transition: width 1s;
        }
        
        footer {
            text-align: center;
            margin-top: 30px;
            padding: 10px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>哆啦A梦的健康生活课堂</h1>
            <div class="character"></div>
        </header>
        
        <div class="lesson">
            <h2>健康饮食</h2>
            <p>哆啦A梦最喜欢铜锣烧了，但你知道他也会吃蔬菜水果吗？</p>
            
            <div class="tip">
                <p>每天要吃五种不同颜色的水果和蔬菜，这样身体才能获得各种营养！</p>
            </div>
            
            <div class="activity">
                <h3>食物分类游戏</h3>
                <p>把下面的食物拖到正确的分类中：</p>
                <div id="food-game" style="min-height: 150px; border: 1px solid #ccc; padding: 10px;">
                    <!-- 游戏内容将通过JavaScript动态生成 -->
                </div>
                <button onclick="checkFoodGame()">检查答案</button>
            </div>
        </div>
        
        <div class="lesson">
            <h2>适量运动</h2>
            <p>大雄经常跑步躲避胖虎，运动可以帮助我们保持健康！</p>
            
            <div class="tip">
                <p>每天至少运动60分钟，可以和朋友们一起玩更有趣！</p>
            </div>
            
            <div class="activity">
                <h3>运动挑战</h3>
                <p>完成今天的运动目标：</p>
                <div class="progress-container">
                    <div id="progress-bar" class="progress-bar"></div>
                </div>
                <button onclick="addProgress(10)">跳绳5分钟 (+10%)</button>
                <button onclick="addProgress(15)">跑步10分钟 (+15%)</button>
                <button onclick="addProgress(20)">骑自行车15分钟 (+20%)</button>
            </div>
        </div>
        
        <div class="lesson">
            <h2>充足睡眠</h2>
            <p>哆啦A梦每天都会提醒大雄早点睡觉，小朋友需要9-11小时的睡眠哦！</p>
            
            <div class="tip">
                <p>睡前1小时不要玩电子设备，可以帮助你更快入睡。</p>
            </div>
            
            <div class="activity">
                <h3>睡眠时间计算器</h3>
                <p>你几点上床睡觉？几点起床？</p>
                <label for="bedtime">上床时间:</label>
                <input type="time" id="bedtime">
                <label for="waketime">起床时间:</label>
                <input type="time" id="waketime">
                <button onclick="calculateSleep()">计算睡眠时间</button>
                <p id="sleep-result"></p>
            </div>
        </div>
        
        <div class="lesson">
            <h2>个人卫生</h2>
            <p>哆啦A梦的四次元口袋里总有洗手液，保持清洁很重要！</p>
            
            <div class="tip">
                <p>洗手时要唱两遍"生日快乐歌"，这样才能洗得足够干净。</p>
            </div>
            
            <div class="activity">
                <h3>洗手步骤动画</h3>
                <div id="handwash-animation" style="height: 200px; background-color: #f0f0f0; position: relative;">
                    <div id="handwash-step" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; text-align: center;">
                        点击开始学习洗手步骤
                    </div>
                </div>
                <button onclick="startHandwashAnimation()">开始洗手教学</button>
            </div>
        </div>
        
        <footer>
            <p>© 2023 哆啦A梦的健康课堂 | 和小伙伴们一起健康快乐成长！</p>
        </footer>
    </div>

    <script>
        // 食物分类游戏数据
        const foods = [
            {name: "苹果", type: "healthy"},
            {name: "汉堡", type: "unhealthy"},
            {name: "胡萝卜", type: "healthy"},
            {name: "薯条", type: "unhealthy"},
            {name: "牛奶", type: "healthy"},
            {name: "糖果", type: "unhealthy"}
        ];
        
        // 初始化食物游戏
        function initFoodGame() {
            const gameArea = document.getElementById('food-game');
            gameArea.innerHTML = '';
            
            // 创建分类区域
            const healthyDiv = document.createElement('div');
            healthyDiv.className = 'food-category';
            healthyDiv.innerHTML = '<h4>健康食物</h4>';
            healthyDiv.style = 'min-height: 60px; border: 2px solid green; margin-bottom: 10px; padding: 5px;';
            
            const unhealthyDiv = document.createElement('div');
            unhealthyDiv.className = 'food-category';
            unhealthyDiv.innerHTML = '<h4>不健康食物</h4>';
            unhealthyDiv.style = 'min-height: 60px; border: 2px solid red; margin-bottom: 10px; padding: 5px;';
            
            gameArea.appendChild(healthyDiv);
            gameArea.appendChild(unhealthyDiv);
            
            // 创建可拖拽的食物项
            const foodItemsDiv = document.createElement('div');
            foodItemsDiv.style = 'display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;';
            
            foods.forEach(food => {
                const foodItem = document.createElement('div');
                foodItem.textContent = food.name;
                foodItem.draggable = true;
                foodItem.dataset.type = food.type;
                foodItem.style = 'padding: 8px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; cursor: move;';
                
                foodItem.addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData('text/plain', food.name);
                    e.dataTransfer.setData('type', food.type);
                });
                
                foodItemsDiv.appendChild(foodItem);
            });
            
            gameArea.appendChild(foodItemsDiv);
            
            // 设置拖放区域
            healthyDiv.addEventListener('dragover', function(e) {
                e.preventDefault();
            });
            
            unhealthyDiv.addEventListener('dragover', function(e) {
                e.preventDefault();
            });
            
            healthyDiv.addEventListener('drop', function(e) {
                e.preventDefault();
                const foodName = e.dataTransfer.getData('text/plain');
                const foodType = e.dataTransfer.getData('type');
                
                if (foodType === 'healthy') {
                    const foodItem = document.createElement('div');
                    foodItem.textContent = foodName;
                    foodItem.style = 'margin: 5px; padding: 5px; background-color: #e6ffe6;';
                    this.appendChild(foodItem);
                }
            });
            
            unhealthyDiv.addEventListener('drop', function(e) {
                e.preventDefault();
                const foodName = e.dataTransfer.getData('text/plain');
                const foodType = e.dataTransfer.getData('type');
                
                if (foodType === 'unhealthy') {
                    const foodItem = document.createElement('div');
                    foodItem.textContent = foodName;
                    foodItem.style = 'margin: 5px; padding: 5px; background-color: #ffe6e6;';
                    this.appendChild(foodItem);
                }
            });
        }
        
        // 检查食物游戏答案
        function checkFoodGame() {
            alert('哆啦A梦说：做得不错！记得多吃健康食物哦！');
        }
        
        // 运动进度条
        function addProgress(percent) {
            const progressBar = document.getElementById('progress-bar');
            let currentWidth = parseInt(progressBar.style.width) || 0;
            currentWidth += percent;
            
            if (currentWidth > 100) {
                currentWidth = 100;
                alert('恭喜完成今天的运动目标！哆啦A梦为你点赞！');
            }
            
            progressBar.style.width = currentWidth + '%';
        }
        
        // 计算睡眠时间
        function calculateSleep() {
            const bedtime = document.getElementById('bedtime').value;
            const waketime = document.getElementById('waketime').value;
            
            if (!bedtime || !waketime) {
                alert('请填写上床和起床时间！');
                return;
            }
            
            const [bedHour, bedMin] = bedtime.split(':').map(Number);
            const [wakeHour, wakeMin] = waketime.split(':').map(Number);
            
            let bedTotal = bedHour * 60 + bedMin;
            let wakeTotal = wakeHour * 60 + wakeMin;
            
            if (wakeTotal < bedTotal) {
                wakeTotal += 24 * 60; // 跨天计算
            }
            
            const sleepMinutes = wakeTotal - bedTotal;
            const sleepHours = Math.floor(sleepMinutes / 60);
            const remainingMinutes = sleepMinutes % 60;
            
            const result = document.getElementById('sleep-result');
            
            if (sleepMinutes >= 9 * 60) {
                result.innerHTML = `你睡了${sleepHours}小时${remainingMinutes}分钟，<span style="color:green">睡眠充足！哆啦A梦很开心！</span>`;
            } else {
                result.innerHTML = `你睡了${sleepHours}小时${remainingMinutes}分钟，<span style="color:red">睡眠不足哦！今晚要早点睡！</span>`;
            }
        }
        
        // 洗手动画
        function startHandwashAnimation() {
            const steps = [
                "1. 打开水龙头，湿润双手",
                "2. 取适量洗手液",
                "3. 搓洗手心",
                "4. 搓洗手背",
                "5. 搓洗指缝",
                "6. 搓洗指尖",
                "7. 搓洗大拇指",
                "8. 搓洗手腕",
                "9. 用清水冲洗干净",
                "10. 用干净毛巾擦干"
            ];
            
            const stepElement = document.getElementById('handwash-step');
            let currentStep = 0;
            
            stepElement.textContent = steps[currentStep];
            
            const animationInterval = setInterval(() => {
                currentStep++;
                
                if (currentStep >= steps.length) {
                    clearInterval(animationInterval);
                    stepElement.innerHTML = '洗手完成！<br><span style="color:blue">哆啦A梦说：记得经常洗手哦！</span>';
                    return;
                }
                
                stepElement.textContent = steps[currentStep];
            }, 2000);
        }
        
        // 页面加载时初始化
        window.onload = function() {
            initFoodGame();
        };
    </script>
</body>
</html>
标签