DKFile AI - 移动端Demo

思考过程
理解需求：小学生计算题练习
设计思路：绿色护眼配色
功能模块：加减乘除四则运算
代码实现：单文件HTML
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>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #d1fae5 0%, #f0fdf4 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
        }
        h1 {
            color: #10b981;
            text-align: center;
            margin-bottom: 30px;
        }
        .question {
            font-size: 36px;
            text-align: center;
            color: #059669;
            margin: 40px 0;
            font-weight: bold;
        }
        input {
            width: 100%;
            padding: 15px;
            font-size: 24px;
            border: 2px solid #10b981;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 20px;
        }
        button {
            width: 100%;
            padding: 15px;
            font-size: 20px;
            background: #10b981;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 10px;
        }
        button:active {
            background: #059669;
        }
        .score {
            text-align: center;
            font-size: 20px;
            color: #065f46;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 小学生计算题练习</h1>
        <div class="question" id="question"></div>
        <input type="number" id="answer" placeholder="请输入答案">
        <button onclick="checkAnswer()">提交答案</button>
        <button onclick="nextQuestion()">下一题</button>
        <div class="score">得分：<span id="score">0</span></div>
    </div>
    
    <script>
        let score = 0;
        let currentAnswer = 0;
        
        function generateQuestion() {
            const num1 = Math.floor(Math.random() * 20) + 1;
            const num2 = Math.floor(Math.random() * 20) + 1;
            const operations = ['+', '-', '×', '÷'];
            const op = operations[Math.floor(Math.random() * 4)];
            
            let question = "";
            if (op === '+') {
                question = num1 + " + " + num2;
                currentAnswer = num1 + num2;
            } else if (op === '-') {
                question = Math.max(num1, num2) + " - " + Math.min(num1, num2);
                currentAnswer = Math.max(num1, num2) - Math.min(num1, num2);
            } else if (op === '×') {
                const n1 = Math.floor(Math.random() * 10) + 1;
                const n2 = Math.floor(Math.random() * 10) + 1;
                question = n1 + " × " + n2;
                currentAnswer = n1 * n2;
            } else {
                const n1 = Math.floor(Math.random() * 10) + 1;
                const n2 = Math.floor(Math.random() * 10) + 1;
                question = (n1 * n2) + " ÷ " + n1;
                currentAnswer = n2;
            }
            
            document.getElementById('question').textContent = question + " = ?";
            document.getElementById('answer').value = '';
        }
        
        function checkAnswer() {
            const userAnswer = parseInt(document.getElementById('answer').value);
            if (userAnswer === currentAnswer) {
                alert('✅ 答对了！');
                score += 10;
                document.getElementById('score').textContent = score;
                nextQuestion();
            } else {
                alert('❌ 答错了，正确答案是：' + currentAnswer);
            }
        }
        
        function nextQuestion() {
            generateQuestion();
        }
        
        // 初始化
        generateQuestion();
    </script>
</body>
</html>