利用JavaScript差集实现一个对比小工具
更新时间：2021年07月13日 11:06:08 作者：小李叭叭叭
这篇文章主要给大家介绍了关于利用JavaScript差集实现一个对比小工具的相关资料,虽然实现的界面不是太好看,但好在功能实用即可,需要的朋友可以参考下
前言
在工作中需要每周统计人员提交材料情况又不想一个一个复制黏贴查找只好写一个小工具帮自己查找谁没提交材料
先把页面搞一搞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
/* border: none; */
width: 49%;
height: 400px;
/* font-size: 17pt; */
}
#btn {
width: 100%;
height: 50px;
position: relative;
top: 0px;
/* position: absolute; */
}
#p2 {
margin-left: 940px;
margin-top: -38px;
}
</style>
</head>
<body>
<button id="btn" class="ambi-light-button">对比</button>
<textarea id="txt" type="text" placeholder="应提交"></textarea>
<textarea id="txt2" type="text" placeholder="已提交"></textarea>
<hr>
<p>未提交</p>
<p id="p2">已提交未在人名单</p>
<textarea id="txt3" type="text" placeholder="未提交"></textarea>
<textarea id="txt4" type="text" placeholder="已提交未在人名单"></textarea>
</body>
</html>
有点丑，无所谓了自己用
开始写JS代码
<script
//先把输入框，按钮获取一下
let txt = document.querySelector('#txt')
let txt2 = document.querySelector('#txt2')
let txt3 = document.querySelector('#txt3')
let txt4 = document.querySelector('#txt4')
let btn = document.querySelector('#btn')
//然后写一个数组去重求差集
const getDifference = function (a, b) {
//解释：如果传入的两个函数是数组
if (a.constructor === Array && b.constructor === Array) {
let set1 = new Set(a);
let set2 = new Set(b);
// 利用Set去重，筛选找到差值
return Array.from(new Set([...set1].filter(x => !set2.has(x))));
}
return null;
}
//简简单单给按钮来一个点击事件吧
btn.onclick = function () {
//应提交人名单
let Should_sub = txt.value.split('\n')
//未提交人名单
let already_sub = txt2.value.split('\n')
let l3 = getDifference(Should_sub, already_sub)
//未在人名单中提交人数
let l4 = getDifference(already_sub, Should_sub)
//筛选好的值反馈给页面的两个输入框
txt3.value = l3.join('\n')
txt4.value = l4.join('\n')
}
</script>
总结
到此这篇关于利用JavaScript差集实现一个对比小工具的文章就介绍到这了,更多相关JS差集实现对比小工具内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加，需要的朋友可以参考下2014-09-09
这篇文章主要为大家详细介绍了JS实现简单的表格增删，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
JavaScript通过prototype给对象定义属性用法实例
这篇文章主要介绍了JavaScript通过prototype给对象定义属性用法,实例分析了prototype的功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了使用javascript做的一个随机点名程序，经测试，效果相当不错,需要的朋友可以参考下2014-02-02
这篇文章主要为大家详细介绍了js时间戳与日期格式之间相互转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要为大家介绍了JS Generator函数yield表达式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了JS实现简单的文字无缝上下滚动功能,结合实例形式分析了JavaScript结合时间函数动态操作页面元素属性变换实现文字滚动功能相关操作技巧,需要的朋友可以参考下2019-06-06
写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
网页中的"运行代码"是一个很方便的功能，可以直接看到代码的效果，感兴趣的朋友不妨参考下，或许对你学习js有所帮助，好了花不多说切入正题2013-02-02
检查对象类型的一种方式是参考所有JavaScript对象所共有的一个称为constructor的属性。该属性是对一个最初用来构造此对象的函数的引用。2010-10-10
最新评论