一、程序概述
本程序是一个基于 HTML、CSS 和 JavaScript 构建的网页应用，旨在实现小组之间成绩 PK 的可视化展示。用户可以方便地对 8 个小组的积分进行操作，并实时查看各小组积分排名情况，同时具备生动的排序动画效果，增强了交互性和视觉体验。
二、主要功能
- 小组信息展示：在网页中以表格形式清晰展示 8 个小组的基本信息，包括小组名称、当前积分以及操作按钮。
- 积分操作：为每个小组配备 “加分” 和 “减分” 按钮，用户可根据实际情况随时调整小组积分。点击 “加分” 按钮，对应小组积分增加 1 分；点击 “减分” 按钮，若该小组积分大于 0，则积分减少 1 分。
- 实时排序：每次对小组积分进行操作后，程序会自动对所有小组按照积分从高到低进行排序，并更新表格显示顺序，确保用户能及时了解各小组的排名变化。
- 动画效果：当小组积分变化导致排名改变时，会触发相应的动画效果。排名上升的小组会呈现从低往上爬的动画（
climbUp），仿佛在努力追赶超越；排名下降的小组则会有从上往下滑的动画（slideDown），直观地展示排名的动态变化过程，增强了页面的趣味性和交互性。
三、技术实现
- HTML：构建页面的基本结构，包括标题、表格等元素，为后续的内容展示提供框架。
- CSS：负责页面的样式设计，运用
flexbox布局实现页面内容的垂直和水平居中，使页面布局更加合理美观。为表格添加了圆角、阴影等效果，提升了视觉质感。同时，定义了climbUp和slideDown两个关键帧动画，为小组排名变化提供动画支持。 - JavaScript：实现核心业务逻辑，包括初始化小组数据、生成表格内容、处理积分操作、排序以及动画触发等功能。通过
sort方法对小组数据进行排序，利用querySelector等方法操作 DOM 元素，确保页面内容的动态更新和交互响应。
四、应用场景
本程序适用于各种需要进行小组竞赛、评分活动的场景，如课堂小组竞赛、团队项目评比等。通过直观的界面展示和实时的排名更新，能够激发小组之间的竞争意识，提高活动的参与度和趣味性。
