利用JavaScript差集實(shí)現(xiàn)一個(gè)對(duì)比小工具
前言
在工作中需要每周統(tǒng)計(jì)人員提交材料情況又不想一個(gè)一個(gè)復(fù)制黏貼查找只好寫(xiě)一個(gè)小工具幫自己查找誰(shuí)沒(méi)提交材料
先把頁(yè)面搞一搞
<!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 class='ambi-light-button'>對(duì)比</button> <textarea type='text' placeholder='應(yīng)提交'></textarea> <textarea type='text' placeholder='已提交'></textarea> <hr> <p>未提交</p> <p id='p2'>已提交未在人名單</p> <textarea type='text' placeholder='未提交'></textarea> <textarea type='text' placeholder='已提交未在人名單'></textarea></body></html>
有點(diǎn)丑，無(wú)所謂了自己用
開(kāi)始寫(xiě)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’) //然后寫(xiě)一個(gè)數(shù)組去重求差集 const getDifference = function (a, b) { //解釋?zhuān)喝绻麄魅氲膬蓚€(gè)函數(shù)是數(shù)組 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; } //簡(jiǎn)簡(jiǎn)單單給按鈕來(lái)一個(gè)點(diǎn)擊事件吧 btn.onclick = function () { //應(yīng)提交人名單 let Should_sub = txt.value.split(’n’) //未提交人名單 let already_sub = txt2.value.split(’n’) let l3 = getDifference(Should_sub, already_sub) //未在人名單中提交人數(shù) let l4 = getDifference(already_sub, Should_sub) //篩選好的值反饋給頁(yè)面的兩個(gè)輸入框 txt3.value = l3.join(’n’) txt4.value = l4.join(’n’) } </script>
總結(jié)
到此這篇關(guān)于利用JavaScript差集實(shí)現(xiàn)一個(gè)對(duì)比小工具的文章就介紹到這了,更多相關(guān)JS差集實(shí)現(xiàn)對(duì)比小工具內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 詳解瀏覽器的緩存機(jī)制2. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)3. ASP基礎(chǔ)知識(shí)VBScript基本元素講解4. UDDI FAQs5. XML入門(mén)的常見(jiàn)問(wèn)題(四)6. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)7. XML解析錯(cuò)誤：未組織好 的解決辦法8. asp(vbscript)中自定義函數(shù)的默認(rèn)參數(shù)實(shí)現(xiàn)代碼9. 利用CSS3新特性創(chuàng)建透明邊框三角10. 使用Spry輕松將XML數(shù)據(jù)顯示到HTML頁(yè)的方法
網(wǎng)公網(wǎng)安備