菜单 搜索
首页 前端知识 【油猴脚本】00036 案例 Tampermonkey油猴脚本,爬虫, 仅用于学习,不要乱搞。网页数据获取器-添加层级不遮挡。Jquery爬虫,HTML Css JavaScript编写

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

2024-10-29 11:10:04 前端知识 前端哥 372 327 我要收藏

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

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

目录

  • 【油猴脚本】00036 案例 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：
  • 📚一、效果
  • 📚二、核心解析
    • 💡修改table-card的z-index的层级为99999：
  • 📚三、完整源代码，可以直接复制使用
    • ✍️JavaScript
  • 📚四、使用此代码的方法：

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

【油猴脚本】00036 案例 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
复制

📚一、效果

原先

在这里插入图片描述

更改后

在这里插入图片描述

📚二、核心解析

💡修改table-card的z-index的层级为99999：

   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:99999;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
    overflow: hidden;
   }
复制

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

✍️JavaScript

// ==UserScript==
// @name         网页数据获取器-提升层级
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  动态渲染表格，美化缩小化窗口
// @author       CSDN@宝码香车
// @match        https://developer.mozilla.org/zh-CN/
// @match        https://www.此广告位招商.com/
// @match        *://*/*
// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css
// @require      https://code.jquery.com/jquery-1.9.1.min.js
// @require      https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js
// @require      https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-end
// ==/UserScript==
 
 
(function () {
  'use strict';
 
  let tableHtml = `
    <div class="col-md-8 table-card scaleDownCard" style="padding:1em;">
      <div class="card-title">网页数据获取器</div>
    <div  class="panel panel-default">
         <div class="panel-heading">
            功能区
         </div> 
         <div class="panel-body">
            <div id="draggableArea" class="draggableBtn btn btn-default">🛼 拖拽这里移动位置</div>
            <div id="scaleDownArea" class="btn btn-default">➖ 缩小窗口</div>
            <div id="scaleUpArea" class="btn btn-default">➕ 放大窗口</div>
         </div>
      </div>
      <div  class="panel panel-default">
         <div class="panel-heading">
            操作区
         </div>
         <div class="panel-body">
            <button id="editCols" class="btn btn-default">📝 编辑表格</button>
            <button id="run" class="btn btn-default">🫳 获取当前页数据</button>
            <button id="getDataRange" class="btn btn-default">🙌 获取更多页数据</button>
            <button id="outExcel" class="btn btn-default">☝️ 导出Excel</button>
         </div>
      </div>
      <div  class="panel panel-default">
         <div class="panel-heading">
                配置多页参数区
         </div>
         <div class="panel-body">
           <form id="dataRangeForm" class="form-horizontal">
             <div class="form-group clearfix">
                 <div class="col-xs-6">
                    <div class="input-group">
                        <span class="input-group-addon"><label  style="margin-bottom:0;" for="startPageIdx1">🕷️ 开始页</label></span>
                        <input type="text" id="startPageIdx1" name="startPageIdx1" class="form-control input-line" placeholder="基础url地址">
                    </div>
                </div>
                <div class="col-xs-3">
                    <input type="number" name="startPageIdx2" class="form-control input-line"  placeholder="页码数字参数">
                </div>
                <div class="col-xs-3">
                    <input type="text" name="startPageIdx3" class="form-control input-line"  value="/" placeholder="若无值，默认是/">
                </div>
             </div>  
             <div class="form-group clearfix">
                 <div class="col-xs-6">
                    <div class="input-group">
                        <span class="input-group-addon"><label  style="margin-bottom:0;" for="endPageIdx1">🕸️ 结束页</label></span>
                        <input type="text" name="endPageIdx1" class="form-control input-line" id="endPageIdx1" placeholder="基础url地址">
                    </div>
                 </div>
                 <div class="col-xs-3">
                    <input type="number" name="endPageIdx2" class="form-control input-line" placeholder="页码数字参数">
                 </div>
                 <div class="col-xs-3">
                    <input type="text" name="endPageIdx3" class="form-control input-line" value="/" placeholder="若无值，默认是/">
                 </div>
             </div> 
           </form>                            
         </div>
      </div>
      <div class="table-responsive">
         <table class="table table-bordered table-striped" id="test_table">
         </table>
      </div>
      <div class="msgWrap col-md-8">
          <div class="msgContent">
          </div>
      </div>
    </div>
    `
  let cssMore = `
    .modal{
        background: rgba(0,0,0,0.5);
    }
    .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 //结束页数，实际获取的是1-4页的数据，第一页本身就存在，指定2-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 = `<thead><tr><td>序号</td>`
    }else{
      addTableHtml = `<thead><tr>`
    }
    for (const x of strArr) {
      addTableHtml += `<td>${x}</td>`;
    }
    addTableHtml += `</tr></thead>`;
 
    if(isOrderNumber){  //显示序号
      addTableHtml += `<tbody><tr><td>1</td>`
    }else{
      addTableHtml += '<tbody><tr>'
    }
    for (const y of strArr) {
      addTableHtml += `<td>默认无值</td>`;
    }
    addTableHtml += `</tr></tbody>`
    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)
  // 把动态渲染的表格内容，添加到页面中的table位置
  $('#test_table').html(initColHtml);
 
  //弹出框，编辑表格-列
  let editTableCols = `
  <div class="modal" id="editTableColsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">编辑表格-列</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="colseBtn">&times;</span></button>
              </div>
              <form class="modal-body">
              </form>
              <div class="modal-footer">
                  <button type="button" id="btn_addCol" class="btn btn-primary" style="float: left" data-dismiss="modal">添加一列</button>
                  <button type="button" class="btn btn-default colseBtn" data-dismiss="modal">关闭</button>
                  <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal">保存</button>
              </div>
          </div>
      </div>
  </div>
  `
  //动态渲染列
  const colsRender = (optionStr,dataOptionStr,idxOption)=>{
    if(!dataOptionStr){
      dataOptionStr = '无参数，请填写参数，参数是css选择器'
    }
    let str = `
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row clearfix">
                <div class="col-xs-6">
                    <div class="title">
                        第${idxOption}列
                    </div>
                </div>
                <div class="col-xs-6">
                    <button class="delCol btn btn-default btn-xs pull-right">删除此列</button>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">
                        <label  style="margin-bottom:0;" for="colName${idxOption}">列的名称:</label>
                    </div>
                    <input type="text" id="colName${idxOption}" class="form-control" value="${optionStr}">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">
                        <label  style="margin-bottom:0;" for="colData${idxOption}">数据位置:</label>
                    </div>
                    <input type="text" id="colData${idxOption}" class="form-control" value="${dataOptionStr}">
                </div>
            </div>
        </div>
    </div>
    `
    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 = '' //获cssSelector名称
      let $eleItem = $(eleItm);
      if(idx%2===0){
         formName = $eleItem.val(); //获取列名称
         strArr.push(formName)
      }else{
         cssName = $eleItem.val() //获cssSelector名称
         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()
  })
 
  // 点击-导出Excel
  $("#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 = '<div id="testHtml"></div>'
  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)  //获取页面的html及数据
      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)
    })
 
    //把数据组装成html元素
    let trs = ''  //一行单元格
    let totalLIneNum = eleTotalColArr[0].length; //总行数
    let fieldNum = eleTotalColArr.length;
    for (let i=0;i<totalLIneNum;i++){
      let tds = ''
      if(isOrderNumber){
        tds = `<td>${i+1}</td>`
      }
      for(let i2 = 0;i2<fieldNum;i2++){
        tds += `<td>${eleTotalColArr[i2][i]}</td>`
      }
 
      trs += `<tr>${tds}</tr>`
    }
    //把数据放入表格
    $('.table-card tbody').html(trs);
    msg(`全部数据获取完成,共计获取${totalLIneNum}条`)
  }
 
  //提示信息框
  function msg(msgStr){
    let msgHtml = ` <div class="loadMsg">${msgStr}•••</div>`
    let $msgContent = $('.msgWrap .msgContent');
    $msgContent.append(msgHtml).scrollTop($msgContent.prop('scrollHeight'))
 
  }
 
 
  function htmlTableToExcel(objOptions){
    if(!objOptions){
      alert("请填写函数调用参数")
      return false;
    }
    let opt = objOptions;
    // opt.htmlElementTable 需要转化的htmlTable
    // opt.excelSaveName 导出的表格名称
 
    // 1、寻找表格元素
    let html_table = document.querySelector(`${opt.htmlElementTable}`)
    // 2、创建新的工作簿
    const wb = XLSX.utils.book_new()
    // 3、将表格元素转sheet表格
    const worksheet = XLSX.utils.table_to_sheet(html_table)
    // 4、将sheet表添加到工作簿
    XLSX.utils.book_append_sheet(wb, worksheet, "Sheet1");
    // 5、保存工作簿
    XLSX.writeFile(wb, `${opt.excelSaveName}.xlsx`)
  }
 
 
  // Your code here...
 
 
 
})();
复制

📚四、使用此代码的方法：

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()）操作

转载请注明出处或者链接地址：https://www.qianduange.cn//article/19497.html
标签
tampermonkey油猴脚本html css js
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

用html写一个漂亮的登录页

2025-01-16 20:01:33

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！