【油猴脚本】00026 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加拖拽图标。Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写。

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

---

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

🔥【油猴脚本】00026 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加拖拽图标。Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写

使用的库：

Bootstrap的Css库CDN:

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

Jquery库CDN：

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

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

📚一、效果

添加拖拽图标

---

📚二、核心解析

💡1.添加拖拽图标：

 <div id="draggableArea" class="draggableBtn btn btn-default">🛼 拖拽这里移动位置</div>

💡2.修改窗口变小时的宽度，修改css样式：

修改css样式，因为增加了图标，按钮变大了，所以窗口变小时的宽度也要变大

   .scaleDownCard{
   
   
    width:330px;
    height:130px;
   }

---

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

✍️JavaScript

// ==UserScript==
// @name         添加 - 拖拽图标
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  动态渲染表格
// @author       CSDN@宝码香车
// @match        https://developer.mozilla.org/zh-CN/
// @match        https://www.zhipin.com/web/geek/job?city=100010000
// @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" style="padding:1em;">
    <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="scaleDown btn btn-default">➖ 缩小窗口</div>
            <div id="scaleUpArea" class="scaleDown btn btn-default" style="display: none;">➕ 复原窗口</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 = `
    #draggableArea{
    cursor:move;
    }
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:100;
    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:330px;
    height:130px;
   }
  `
  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"