2. 程式人生 > 程式設計 >利用JavaScript差集實現一個對比小工具

利用JavaScript差集實現一個對比小工具

阿新 • • 發佈：2021-07-15

前言

在工作中需要每週統計人員提交材料情況又不想一個一個複製黏貼查詢只好寫一個小工具幫自己查詢誰沒提交材料

先把頁面搞一搞

<!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;
    }
  &wvEIJChErk
 
lt;/style>
</head>
<body>
  <button id="btn" class="ambi-light-button">對比</button>
  <textarea id="txt" type="text" placeholder="應提交"></textarea>
  <textarea id="txt2www.cppcns.com" 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>
<http://www.cppcns.com
 
;/html>

利用JavaScript差集實現一個對比小工具

有點醜，無所謂了自己用

開始寫程式碼

<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);
      lwvEIJChErk
 
et set2 = new Set(b);
      // 利用Set去重，篩選找到差值
      return Array.from(new Set([...set1].filter(x => !set2.has(xhttp://www.cppcns.com))));
    }
    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>

總結

到此這篇關於利用差集實現一個對比小工具的文章就介紹到這了,更多相關JS差集實現對比小工具內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

利用JavaScript差集實現一個對比小工具

前言 在工作中需要每週統計人員提交材料情況又不想一個一個複製黏貼查詢只好寫一個小工具幫自己查詢誰沒提交材料

C++實現一個掃雷小遊戲

本文例項為大家分享了C++實現掃雷小遊戲的具體程式碼，供大家參考，具體內容如下

利用 React 高階元件實現一個麵包屑導航

什麼是 React 高階元件 React 高階元件就是以高階函式的方式包裹需要修飾的 React 元件，並返回處理完成後的 React 元件。React 高階元件在 React 生態中使用的非常頻繁，比如react-router 中的 withRouter 以及 rea

實現一個最小版本vue（二）之observer

Vue 功能 負責接收初始化的引數 負責把data中的屬性注入到vue例項，轉化稱getter，setter

python每日一練：利用切片操作，實現一個trim()函式，去除字串首尾的空格，注意不要呼叫str的strip()方法

本文內容皆為作者原創，碼字不易，如需轉載，請註明出處：https://www.cnblogs.com/temari/p/13411894.html

利用React高階元件實現一個麵包屑導航的示例

什麼是 React 高階元件 React 高階元件就是以高階函式的方式包裹需要修飾的 React 元件，並返回處理完成後的 React 元件。React 高階元件在 React 生態中使用的非常頻繁，比如react-router 中的 withRouter 以及 re

如何使用Swift來實現一個命令列工具

本文即簡單介紹瞭如何在Swift中開發命令列工具，以及與Shell命令的互動。水文一篇，不喜勿噴。

如何使用Swift來實現一個命令列工具的方法

本文即簡單介紹瞭如何在Swift中開發命令列工具，以及與Shell命令的互動。水文一篇，不喜勿噴。

騰訊位置服務教你快速實現距離測量小工具

以下內容轉載自麵糊的文章《騰訊地圖SDK距離測量小工具》 作者：麵糊 連結：https://www.jianshu.com/p/6e507ebcdd93

使用騰訊地圖SDK快速實現距離測量小工具

以下內容轉載自麵糊的文章《騰訊地圖SDK距離測量小工具》 作者：麵糊 連結：https://www.jianshu.com/p/6e507ebcdd93

使用騰訊位置服務地圖SDK快速實現距離測量小工具

以下內容轉載自麵糊的文章《騰訊地圖SDK距離測量小工具》 作者：麵糊 連結：https://www.jianshu.com/p/6e507ebcdd93

使用ABAP Channel實現一個訂單跟蹤工具，提高日常工作效率

There are already many nice blogs introducing nice features provided by ABAP channels in community, for example ABAP Channels Examples.

PyQt5製作一個爬蟲小工具，爬取雪球網上市公司的財務資料

本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,如有問題請及時聯絡我們以作處理。

用C#實現一個導表工具

Egret使用的導表工具 Excel(.xlsx格式)生成txt檔案、ts檔案、byte檔案(txt壓縮包) 覺得現在專案的導表工具不錯，就造了波輪子，自己做了個閹割版的導表工具；適合中小性遊戲開發，只涉及前端邏輯，沒有做伺

http.server 實現運維小工具，通過API呼叫Linux、Windows命令指令碼

config/order.json     config/config.ini     command/* 放置指令碼 from http.server import HTTPServer, BaseHTTPRequestHandlerimport osimport jsonimport configparserconfig = configparser.ConfigPars

自己實現一個狀態管理工具store

結合上一篇自己實現的事件匯流排，實現自己的狀態管理工具 const {LQEventBus} = require(\'./event-bus\')

使用javaScript實現一個二叉樹，實現插入節點，刪除節點，查詢節點，最大最小值查詢，中序，前序，後序遍歷功能

const Compare = { LESS_THAN: -1, BIGGER_THAN: 1, EQUALS: 0 }; function defaultCompare(a,b){ return a == b?Compare.EQUALS:(a<b)?Compare.LESS_THAN:Compare.BIGGER_THAN;

如何利用JavaScript編寫一個格鬥小遊戲

拖延症晚期的我原本計劃趁著週末寫個年終總結，但是一直沒有什麼思路，想來想去也沒想到要寫啥就胡亂寫了這麼一個小東西。

國慶節到了,利用JS實現一個生成國慶風頭像的小工具 詳解實現過程

目錄1. 頁面佈局2. 圖片上傳和展示3. 初始化畫布4. 切換模板5. 輸出圖片這裡用到的技術：

一個Shell小指令碼精準統計Mysql每張表的行數實現

前言 對於開發或者運維人員來說，Mysql資料庫每張表的數量肯定是要了解下，有助於我們清理無用資料或者瞭解哪張表比較佔用空間。