javascript 数据分析(利用JavaScript差集实现一个对比小工具)
类别:编程学习 浏览量:651
时间:2021-11-04 19:26:11 javascript 数据分析
利用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差集实现对比小工具内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- ASP.NET中使用CodeDomProvider调用js文件中的js方法
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- js中的内存机制(详解JS内存空间)
- 微信发送镭射效果代码(JS实现微信"炸屎"大作战功能)
- php生成json信息(php使用json-schema模块实现json校验示例)
- js如何编辑数组对象里的数组(JS操作对象数组实现增删改查实例代码)
- nodejs登录案例(利用Node.js创建一个密码生成器的全步骤)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- js脚本语言原理(实例说明js脚本语言和php脚本语言的区别)
- js的异步请求(浅谈JS三座大山之异步和单线程)
- extjs中treepanel例子
- extjs Border边框布局
- 创建jsp时如何默认生成的是utf-8(js判断文件是否为utf-8编码的方法)
- sqlserver字段说明(详解SQL Server 中 JSON_MODIFY 的使用)
- python pdf文件操作(Python常见读写文件操作实例总结文本、json、csv、pdf等)
- js中Document
- 佛肚竹盆景的养护之道(佛肚竹盆景的养护之道)
- 包水饺(包水饺手法怎么包视频)
- 越南河粉(越南河粉来自哪里)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
热门推荐
- sql server提供的聚合函数(SQLServer行列互转实现思路聚合函数)
- 无法访问docker容器内的端口(docker端口映射及外部无法访问问题)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- 相对布局和线性布局的区别(面试必问:圣杯布局和双飞翼布局的区别)
- sqlserver自增长id重置(SQL server 自增ID--序号自动增加的字段操作)
- dedecms怎么调用标签(DEDECMS 留言薄模块的使用方法)
- 在电脑上面如何使用wampserver(wampserver软件在本地建立多个站点方法教程)
- python3的循环怎么用(对Python3 goto 语句的使用方法详解)
- 宝塔nginx配置修改(宝塔面板安装Tengine报错:nginx: [emerg] invalid IPv6 address in resolver)