HTML表单需结合JavaScript实现加权总分自动计算：通过data-weight等属性绑定权重，监听输入事件实时校验、累加，并动态更新总分区域，支持异常提示与配置外置化。
HTML 表单本身不能直接计算加权总分，但结合 JavaScript 可以轻松实现“各项得分自动加权汇总”——关键在于把权重和得分绑定到表单元素上，用脚本实时读取、计算并更新结果。
结构设计：用 data-* 属性标记权重和关联关系
在每个评分输入项（如 input type="number"）上，用 data-weight 标明该项权重（如 0.3），用 data-item-id 或命名规范区分不同考核项。总分区域用 id="total-score" 单独预留。
- 权重建议用小数（如 0.25）或整数（如 25），统一单位后计算更稳妥
- 避免用 class 名存权重（如
class="weight-30"），不易维护且语义不清 - 示例：
<input type="number" data-weight="0.2" data-item-id="attitude">
计算逻辑：监听输入 + 安全校验 + 加权累加
为所有评分输入绑定 input 或 change 事件，遍历获取当前值与对应权重，相乘后累加。注意处理空值、非数字、超范围（如 0–100 分）等异常情况。
- 用
parseFloat(val) || 0防止 NaN 中断计算 - 对得分做边界限制（如
Math.min(100, Math.max(0, score))） - 权重总和建议校验（如加总 ≠ 1.0 时在控制台提示，或显示警告文案）
实时反馈：动态更新总分并高亮异常项
计算完成后，把结果填入总分区域，并可选地根据分数段添加样式（如 ≥90 显示绿色，＜60 显示红色）。同时检查单项是否为空或超限，给对应输入框加 class="warning" 提示。
立即学习“前端免费学习笔记（深入）”；
- 支持小数位控制（如
total.toFixed(2)），避免出现 89.99999999 - 用
textContent更新文本，避免 XSS 风险（不用innerHTML） - 可额外增加“重置”按钮，一键清空所有输入并重算为 0
增强可用性：支持权重/分值配置外置化
若考核标准常变，可把权重和满分值抽成 JS 对象或 JSON 配置，便于后期维护：
const evaluationConfig = [
{ id: "quality", label: "工作质量", weight: 0.3, maxScore: 100 },
{ id: "efficiency", label: "执行效率", weight: 0.25, maxScore: 100 },
{ id: "cooperation", label: "协作配合", weight: 0.2, maxScore: 100 }
];
这样新增或调整指标只需改配置，无需动 HTML 和核心逻辑。
