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差集实现对比小工具内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- JS实现金额大小写转换
- js判断是否为手机访问
- mysql服务器端安装步骤(windows下jsp+mysql网站环境配置方法)
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- js原生tab栏切换(JavaScript实现简易tab栏切换案例)
- css3结合js制作(CSS3截取字符串实例代码推荐)
- 怎么用织梦上传源码(如何把织梦dedecms数据生成json)
- js中encodeURIComponent与C#中HttpUtility.UrlEncode
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- Extjs中文乱码
- js setTimeout
- chrome调试js
- pythonweb和nodejs(Node与Python 双向通信的实现代码)
- nodejs json文件读写(nodejs将JSON字符串转化为JSON对象报错的解决)
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
热门推荐
- react怎么添加动态html(react中的DOM操作实现)
- SQLserver中cube:多维数据集实例详解(SQLserver中cube:多维数据集实例详解)
- laravel服务器设置(基于Laravel-admin 后台的自定义页面用法详解)
- python将txt数据写入excel(Python将列表数据写入文件txt, csv,excel)
- 协程在python中怎么使用(python协程之动态添加任务的方法)
- 阿里云服务器ecs入口(阿里云ECS云服务器更换公网IP的方法)
- python菜单栏教程(Python3.5实现的三级菜单功能示例)
- dedecms文章顺序(dedecms 分页标题提取方法)
- 阿里云服务器购买时考虑的因素(购买阿里云服务器后的基本安全配置)
- dedecms使用教程(Dedecms提示信息及提示内容的修改方法)