动画教学：趣味认识平均数 - 知达AI助教 | 教育人工智能案例 | 教育人工智能社区

帮我生成认识平均数的教学动画
以下是一个关于“认识平均数”的教学动画HTML页面代码，包含中文语言支持，并通过简单的动画和交互帮助学生理解平均数的概念。

代码生成完成

功能说明：

页面结构：

页面以中文展示内容，适合中国学生学习。

包含一组数字（4, 8, 6, 2），用于演示平均数的计算过程。

动画效果：

数字方块在鼠标悬停时会有放大的动画效果，吸引学生的注意力。

点击按钮后，动态显示计算结果。

交互功能：

用户点击“计算平均数”按钮后，JavaScript会计算并显示这组数字的平均数。

美观设计：

页面采用简洁的设计风格，背景柔和，字体清晰，便于阅读。

您可以将此代码保存为HTML文件并在浏览器中打开，即可运行这个教学动画。如果需要进一步调整或扩展功能，请告诉我！

知达任务回放中

动画教学：趣味认识平均数

代码

预览

61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
            background: #0056b3;
        }
    </style>
</head>
<body>
    <h1>认识平均数</h1>
    <div class="container">
        <p>我们有一组数字：4, 8, 6, 
            2。点击按钮查看它们的平均数！</p>
        <div class="numbers">
            <div class="number-box">4</div>
            <div class="number-box">8</div>
            <div class="number-box">6</div>
            <div class="number-box">2</div>
        </div>
        <button onclick="calculateAverage()">计算平均数
            </button>
        <div class="result" id="result"></div>
    </div>
    <script>
        function calculateAverage() {
            const numbers = [4, 8, 6, 2];
            const sum = numbers.reduce((acc, num) => acc + num
                , 0);
            const average = sum / numbers.length;
            document.getElementById('result').innerText = 
                `这组数字的平均数是：${average}`;
        }
    </script>
</body>
</html>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX