前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
目录
- 【油猴脚本】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">×</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())操作