【油猴脚本】00037 案例 Tampermonkey油猴脚本,爬虫, 仅用于学习,不要乱搞。网页数据获取器-遮罩提升层级不遮挡。Jquery爬虫,HTML Css JavaScript编写

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎 收藏 + 关注 哦 💕

目录

• 【油猴脚本】00037 案例 Tampermonkey 油猴脚本, 爬虫, 仅用于学习, 不要乱搞。网页数据获取器 - 遮罩提升层级不遮挡。Jquery 爬虫,JavaScript 爬虫,HTML+Css+JavaScript 编写
• 使用的库：
• • Bootstrap3 的 Css 库 CDN
  • • Bootstrap3 的文档:[https://v3.bootcss.com/](https://v3.bootcss.com/)
  • Jquery 库 CDN，Jquery 库文档：
  • • jquery 官网：
    • jquery 中文网站：
  • sheetjs 库 CDN：
  • Jquery 的库 JqueryUi CDN：
• 📚一、效果
• 📚二、核心解析
• • 💡修改.modal 的 z -index 的层级为 100000：
• 📚三、完整源代码，可以直接复制使用
• 📚四、使用此代码的方法：

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

【油猴脚本】00037 案例 Tampermonkey 油猴脚本, 爬虫, 仅用于学习, 不要乱搞。网页数据获取器 - 遮罩提升层级不遮挡。Jquery 爬虫,JavaScript 爬虫,HTML+Css+JavaScript 编写

使用的库：

Bootstrap3 的 Css 库 CDN

https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css

Bootstrap3 的文档:https://v3.bootcss.com/

Jquery 库 CDN，Jquery 库文档：

 https://code.jquery.com/jquery-1.9.1.min.js

jquery 官网：

https://jquery.com/

jquery 中文网站：

http://asprain.oss-cn-hangzhou.aliyuncs.com/category-ajax.htm

sheetjs 库 CDN：

 https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js

Jquery 的库 JqueryUi CDN：

https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js

📚一、效果

原效果

更改后

📚二、核心解析

💡修改.modal 的 z -index 的层级为 100000：

.modal{
	background: rgba(0,0,0,0.5);
	z-index:100000; 
}

📚三、完整源代码，可以直接复制使用

✍️JavaScript

(function () {
  'use strict';

  let tableHtml = `
    

      
网页数据获取器
    

         

            功能区
         
 
         

            
🛼 拖拽这里移动位置
            
➖ 缩小窗口
            
➕ 放大窗口
         
      
      

         

            操作区
         
         

            📝 编辑表格
            🫳 获取当前页数据
            🙌 获取更多页数据
            ☝️ 导出 Excel
         
      
      

         

                配置多页参数区
         
         

           

             

                 

                    

                        🕷️ 开始页
                        
                    
                
                

                    
                
                

                    
                
             
  
             

                 

                    

                        🕸️ 结束页
                        
                    
                 
                 

                    
                 
                 

                    
                 
             
 
           
                            
         
      
      

         
      
      

          

          
      
    
    `
  let cssMore = `
    .modal{background: rgba(0,0,0,0.5);
        z-index:100000;
    }
    .card-title{
        line-height: 1;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 10px;
        text-align:center;
    }
    #draggableArea{cursor:move;}
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:99999;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
    overflow: hidden;
   }
   .modal-body{
    max-height:500px;
    overflow-y: scroll;
   }
   .msgWrap{
    padding:10px;
    margin-top:10px;
   }
   .msgContent{
    background:#000;
    max-height:100px;
    overflow-y:scroll;
   }
   .loadMsg{
    color:#fff;
    width: fit-content;
    font-size: 16px;
    font-family: monospace;
    clip-path: inset(0 3ch 0 0);
    animation: loadMsgAni 1s steps(4) infinite;
   }
   @keyframes loadMsgAni {to{clip-path: inset(0 -1ch 0 0)}}
   table thead,
   tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    }
   .table-card tbody{display:block;height:200px; overflow:auto; -webkit-overflow-scrolling: touch;}
   .table-card tbody::-webkit-scrollbar {display: none; // 隐藏滚动条}
   .form-group:last-child{margin-bottom:0;}
   .btn-primary {
    color: #fff;
    background-color:  #E95C8A;
    border-color:  #E95C8A;
   }
   .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #c7275b;
    border-color: #c7275b;
   }
   .scaleDownCard{
    width:230px;
    height:213px;
   }
   .scaleDownCard .draggableBtn {margin-bottom:10px;}
   #scaleUpArea{display: none;}
   .scaleDownCard #scaleDownArea{display: none;}
   .scaleDownCard #scaleUpArea{display: inline-block;}
  
  `
  let bsCss = GM_getResourceText('bootstrapCss')
  let startPageNum = 2   
  let endPageNum = 4 
  let isOrderNumber = true 
  GM_addStyle(bsCss)
  GM_addStyle(cssMore)
  $('body').append(tableHtml)

  $('.table-card').draggable({
    handle: '#draggableArea',
    containment:"window"
  })



  
  const initCols = (strArr)=>{
    let addTableHtml = ''
    if(isOrderNumber){  
      addTableHtml = `序号`
    }else{
      addTableHtml = ``
    }
    for (const x of strArr) {
      addTableHtml += `${x}`;
    }
    addTableHtml += ``;

    if(isOrderNumber){  
      addTableHtml += `1`
    }else{
      addTableHtml += ''
    }
    for (const y of strArr) {
      addTableHtml += `默认无值`;
    }
    addTableHtml += ``
    return addTableHtml
  }
  
  let tableColsArr = localStorage.tableColsArr?localStorage.tableColsArr.split(','):['公司名称','招聘职位','薪资'] 
  let cssSelectorArr = [] 
   cssSelectorArr.push('.job-card-wrapper .job-card-right .company-name a')
   cssSelectorArr.push('.job-card-wrapper .job-card-left .job-title .job-name')
   cssSelectorArr.push('.job-card-wrapper .job-card-left .salary')
   cssSelectorArr = localStorage.cssSelectorArr?localStorage.cssSelectorArr.split(','):cssSelectorArr
  let initColHtml = initCols(tableColsArr)
  
  $('#test_table').html(initColHtml);

  
  let editTableCols = `
  

      

          

              

                
编辑表格 - 列
                ×
              
              

              
              

                  添加一列
                  关闭
                  保存
              
          
      
  
  `
  
  const colsRender = (optionStr,dataOptionStr,idxOption)=>{
    if(!dataOptionStr){
      dataOptionStr = '无参数，请填写参数，参数是 css 选择器'
    }
    let str = `
    

        

            

                

                    

                        第 ${idxOption} 列
                    
                
                

                    删除此列
                
            
        
        

            

                

                    

                        ${idxOption}">列的名称:
                    
                    ${idxOption}"class="form-control"value="${optionStr}">
                
            
            

                

                    

                        ${idxOption}">数据位置:
                    
                    ${idxOption}"class="form-control"value="${dataOptionStr}">
                
            
        
    
    `
    return str;
  }

  
  const colsMoreRender = (strArrOpt)=>{
    let str = ''
    for(const x in strArrOpt){
      if(cssSelectorArr.length>0){
        let idxNum = parseInt(x)+1
        str += colsRender(strArrOpt[x],cssSelectorArr[x],idxNum)
      }else{
        str += colsRender(strArrOpt[x])
      }
    }
    return str;
  }

  
  let colsMoreStr = colsMoreRender(tableColsArr)
  $('body').append(editTableCols); 
  $('#editTableColsModal .modal-body').html(colsMoreStr)

  
  const getFormData = ()=>{
    let strArr = []
    cssSelectorArr = []
    $('#editTableColsModal .modal-body .form-group input').each(function(idx,eleItm){
      let formName = ''; 
      let cssName = '' 
      let $eleItem = $(eleItm);
      if(idx%2===0){
         formName = $eleItem.val(); 
         strArr.push(formName)
      }else{
         cssName = $eleItem.val() 
         cssSelectorArr.push(cssName)
      }
    })
    
    localStorage.tableColsArr = strArr;
    localStorage.cssSelectorArr = cssSelectorArr;
    return strArr;
  }



  
  $("#editCols").click(function(){
    $('#editTableColsModal').show() 
  })
  
  $(".colseBtn").click(function(){
    $('#editTableColsModal').hide() 
  })
  
  $("#btn_submit").click(function(){
    $('#editTableColsModal').hide() 
    let getTableColsArr = getFormData()
    let renderColHtml = initCols(getTableColsArr)
    
    $('#test_table').html(renderColHtml);
  })

  
  $(".modal-body").on('click','.delCol',function(){
    if($('#editTableColsModal .panel').length === 1){
      alert('至少保留一个列')
      return false;
    }
    $(this).parents('.panel').remove();
  })

  
  $('#btn_addCol').on('click',function(){
    let panelLength = $('#editTableColsModal .panel').length;
    let currentPanelNum = panelLength + 1;
    $('.modal-body').append(colsRender('新列请重新命名',null,currentPanelNum))
  })

  
  $('#run').click(function(){
    getData()
  })

  
  let dataRange = {}
  $('#getDataRange').click(function(){
    $('#dataRangeForm input').each(function(idx,item){
      dataRange[item.name] = item.value.replace(/s+/g, '')
    })
    let startPageIdx = dataRange.startPageIdx1 + dataRange.startPageIdx2 +dataRange.startPageIdx3
    let endPageIdx =  dataRange.endPageIdx1 + dataRange.endPageIdx2 +dataRange.endPageIdx3
    startPageNum = parseInt(dataRange.startPageIdx2)
    endPageNum = parseInt(dataRange.endPageIdx2)
    run()
  })

  
  $("#outExcel").click(function(){
    let obj = {
      htmlElementTable: '#test_table',
      excelSaveName: '获取的数据'
    }
    htmlTableToExcel(obj)
  })

  
  $("#scaleDownArea").click(function(){
    $('.table-card').toggleClass('scaleDownCard')

  })
  
  $("#scaleUpArea").click(function(){
    $('.table-card').toggleClass('scaleDownCard')
  })

  let strHtml = '
'
  let cssStyle = `
    #testHtml{
      width:100px;
      background:blue;
    }
  `
  GM_addStyle(cssStyle)
  $('body').append(strHtml)

  function getHtml(num){
    msg(`正在获取第 ${num} 页`)
    let requestUrl = dataRange.startPageIdx1 + num +dataRange.startPageIdx3
    $.ajax({
      url: requestUrl,
      timeout: 30000,
      success: function(html){
        $('#testHtml').append(html)
        msg(`第 ${num} 页加载完成`)
        if(num === endPageNum){ 
          getData()
        }
      },
      error:function(er){
        console.log('er',er)
      },
      complete:function(co){
        console.log('co',co)
      }
    });
  }


  function run(){
    msg('开始获取')
    setInterval(function(){
      if(startPageNum>endPageNum){
        return false;
      }
      getHtml(startPageNum)  
      startPageNum++
    },10000)
  }

  
  function getData(){
    msg('正在获取全部数据')
    let eleTotalColArr = []  
    
    cssSelectorArr.forEach(function(item,idx){
      let eleByColArr = []     
      $(item).each(function(idex,ite) {
        eleByColArr.push($(ite).text())
      })
      eleTotalColArr.push(eleByColArr)
    })

    
    let trs = ''  
    let totalLIneNum = eleTotalColArr[0].length; 
    let fieldNum = eleTotalColArr.length;
    for (let i=0;itotalLIneNum;i++){
      let tds = ''
      if(isOrderNumber){
        tds = `${i+1}`
      }
      for(let i2 = 0;i2fieldNum;i2++){
        tds += `${eleTotalColArr[i2][i]}`
      }

      trs += `${tds}`
    }
    
    $('.table-card tbody').html(trs);
    msg(`全部数据获取完成, 共计获取 ${totalLIneNum} 条`)
  }

  
  function msg(msgStr){
    let msgHtml = ` 
${msgStr}•••`
    let $msgContent = $('.msgWrap .msgContent');
    $msgContent.append(msgHtml).scrollTop($msgContent.prop('scrollHeight'))

  }


  function htmlTableToExcel(objOptions){
    if(!objOptions){
      alert("请填写函数调用参数")
      return false;
    }
    let opt = objOptions;
    
    

    
    let html_table = document.querySelector(`${opt.htmlElementTable}`)
    
    const wb = XLSX.utils.book_new()
    
    const worksheet = XLSX.utils.table_to_sheet(html_table)
    
    XLSX.utils.book_append_sheet(wb, worksheet, "Sheet1");
    
    XLSX.writeFile(wb, `${opt.excelSaveName}.xlsx`)
  }


  



})();
 
 
📚四、使用此代码的方法：
 
 
 
1. 浏览器打开 https://developer.mozilla.org/zh-CN/
2. 把代码复制进油猴脚本，打开运行开关，刷新页面
 
 
安装教程：👉 https://blog.csdn.net/qq_33650655/article/details/142097760
使用教程：👉 https://blog.csdn.net/qq_33650655/article/details/142183047
 
 
 
 
到此这篇文章就介绍到这了, 更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家, 希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
 
 
 
 
 
 
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作