JavaScript实现材料提交对比工具：利用差集功能

本文档主要介绍了如何利用JavaScript实现一个简单的对比小工具，用于解决工作中统计人员提交材料的问题。该工具通过用户输入"应提交"的材料列表（txt1）和"已提交"的材料列表（txt2），计算并显示未提交的材料（txt3）以及已提交但不在预期名单中的材料（txt4）。以下将详细介绍实现这个功能的步骤和关键代码部分。 1. **HTML结构**: 首先，文档的HTML部分定义了一个简单的页面布局，包括两个文本输入框（用于输入应提交和已提交的材料），一个对比按钮（id为"btn"），以及两个用于显示结果的文本区域（txt3和txt4）。HTML结构简洁，包含样式定义，如textarea的尺寸和按钮的样式。 2. **CSS样式**: 文档中的CSS样式设置了一些基础的外观，例如文本输入框的宽度、高度和位置，以及按钮的样式。尽管样式可能不够美观，但能满足基本的功能需求。 3. **JavaScript代码**: JavaScript的核心部分在于函数的编写，首先获取输入框元素： ```javascript let txt = document.querySelector('#txt'); let txt2 = document.querySelector('#txt2'); let txt3 = document.getElementById('txt3'); let txt4 = document.getElementById('txt4'); ``` 然后，当用户点击"对比"按钮时，会触发一个事件处理函数，该函数中执行差集操作。这通常通过创建数组，然后使用`Array.prototype.filter()`方法来完成。这里假设用户输入的是字符串数组，可以使用`split()`方法将其转换为数组，之后进行比较： ```javascript document.getElementById('btn').addEventListener('click', function() { // 将输入的字符串转换为数组 let submitted = txt.value.split('\n'); let received = txt2.value.split('\n'); // 差集操作：找出未提交的材料 let unsubmitted = submitted.filter(item => !received.includes(item)); txt3.value = unsubmitted.join('\n'); // 已提交但未在人名单中的材料 let extraReceived = received.filter(item => !submitted.includes(item)); txt4.value = extraReceived.join('\n'); }); ``` 这段代码将用户在输入框中输入的每一行视为一个材料项目，并通过`filter()`方法检查每个项目是否存在于另一个列表中，从而实现了差集操作。最后，结果以换行符分隔的字符串形式展示在相应的文本区域。 总结，本文提供了一个实用的JavaScript脚本，通过用户交互式的方式对比两份材料列表，帮助统计员快速识别出哪些人员未提交材料或提交了额外的材料。尽管界面可能较为简陋，但对于日常办公场景来说，这是一个方便且高效的工具。