共计 7558 个字符，预计需要花费 19 分钟才能阅读完成。
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎 收藏 + 关注 哦 💕
目录
- 【油猴脚本】00020 案例 Tampermonkey 油猴脚本，仅用于学习，不要乱搞。添加不可移动到窗口外的功能。把 easyui 库更换为 JqueryUi 库，JqueryUi 学习性更好。jqueryui 的 Draggable 组件的 bug 发现以及解决,Jquery 爬虫，JavaScript 爬虫，HTML+Css+JavaScript 编写
- 使用的库：
-
- Bootstrap 的 Css 库 CDN:
- Jquery 库 CDN：
- sheetjs 库 CDN：
- Jquery 的库 JqueryUi CDN：
- 📚一、效果
- 📚二、核心解析
-
- 💡1.jqueryui 库的引入：
- 💡2.jqueryui 的 Draggable 组件的 bug 发现以及解决：
- 💡3. 添加 – 不可移动到窗口外的功能：
- 📚三、完整源代码，可以直接复制使用
- 📚四、使用此代码的方法：
📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣
【油猴脚本】00020 案例 Tampermonkey 油猴脚本，仅用于学习，不要乱搞。添加不可移动到窗口外的功能。把 easyui 库更换为 JqueryUi 库，JqueryUi 学习性更好。jqueryui 的 Draggable 组件的 bug 发现以及解决,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.jqueryui 库的引入：
💡2.jqueryui 的 Draggable 组件的 bug 发现以及解决：
原拖拽的 handle 控件是 button, 而 jqueryui 中 button 不能被当做拖拽组件的 handle，因此改变 button 为 div
div id="draggableArea" class="draggableBtn btn btn-default">拖拽这里移动位置/div>
添加拖拽的 handle 的 css 鼠标样式
#draggableArea{
cursor:move;
}
💡3. 添加 – 不可移动到窗口外的功能：
添加 draggable 的参数 containment 为 window
$('.table-card').draggable({
handle: '#draggableArea',
containment:"window"
})
📚三、完整源代码，可以直接复制使用
✍️JavaScript
(function () {
'use strict';
let tableHtml = `
操作区
拖拽这里移动位置
配置多页参数区
`
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;
}
.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;
}
`
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 = ['公司名称','招聘职位','薪资']
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')
let initColHtml = initCols(tableColsArr)
$('#test_table').html(initColHtml);
let editTableCols = `
`
const colsRender = (optionStr,dataOptionStr,idxOption)=>{
if(!dataOptionStr){
dataOptionStr = '无参数，请填写参数，参数是 css 选择器'
}
let str = `
第 ${idxOption} 列
${idxOption}"class="form-control"value="${optionStr}">
${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 = []
$('#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)
}
})
return strArr;
}
$("#editCols").click(function(){
$('#editTableColsModal').show()
})
$(".colseBtn").click(function(){
$('#editTableColsModal').hide()
})
$("#btn_submit").click(function(){
$('#editTableColsModal').hide()
let renderColHtml = initCols(getFormData())
$('#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)
})
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()）操作
正文完
