油猴中文网文章的分页功能以及显示总页数
// ==UserScript==
// @name 油猴中文网文章的分页功能以及显示总页数
// @namespace http://tampermonkey.net/
// @version 0.3
// @description 为了方便看道总的文章，要不然绝逼不写。首先我们需要第一次把所有的页面先点击一次。只需要一次。然后存储到localStorage。之后就不需要。点开直接看就好了
// @author You
// @match https://bbs.tampermonkey.net.cn/*
// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant unsafeWindow
// @run-at document-start
// @grant GM_addStyle
// @connect api.szfx.top
// @grant GM_xmlhttpRequest
// ==/UserScript==
// 引入vue3.js
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);
// <button @click="search">显示当前页面的数据(以前我之前页面的数据)</button>
window.onload=()=>{
let text=`<div id="app">
<div class="search">
<button @click="displayArticleList">显示/隐藏</button>
<button @click="displayContent">仅仅显示我localStorage里面的数据</button>
<button @click="search">显示当前页面的数据(以前我之前页面的数据)</button>
<button @click="clearYeMianContent">清空页面显示的内容而不是清除localStorage</button>
<button @click="clearContent">清除localStorage里面的内容</button>
<div class="articleList">
<div>发表的文章<div>
<span>当前{{currentPage}}页</span>
<button @click="pre">上一页</button>
<button @click="next">下一页</button>
<span>共{{totalPage}}页</span>
<ol >
<li v-for="(item, index) in articleList ">
<Fragment v-if="index < currentPage*20 && index >= (currentPage-1) * 20">
{{index+1}}-<span v-html="item">{{item}}<span>
</Fragment>
</li>
<ol>
</div>
</div>
</div>`
var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const App = {
data() {
return {
articleList: [],
totalPage: 1,
currentPage: 1,
};
},
methods: {
search(){
// 因为每个用户的uid是不一样的，所以我这样存储一下，每个用户的就以key-value的形式存到键值对里面
let uid;
// 通过url地址拿到uid
let url = window.location.href;
try{
let urlArr = url.split("&");
uid = urlArr[1].split("=")[1];
}
catch(err){
console.log("该页面脚本没有相应的功能")
}
if(localStorage.getItem("allAuthorArticleList")){
// 点击的时候先拿到我之前存到localStorage里面的值
let preArticleList = JSON.parse(localStorage.getItem("allAuthorArticleList"));
// 因为我里面存了多个用户了所有要这样判断一下
for(var index in preArticleList){
if(index == uid){
this.totalPage = Math.ceil(preArticleList[uid].length/20);
// 然后把前面的先存进去
this.articleList = preArticleList[uid];
}
}
}
// 拿到当前页面的内容并放到articleList数组里面
let thContentList = document.getElementsByTagName("th");
for(let i=0; i < thContentList.length;i++){
if(i == 0 ){
}else {
this.articleList.push(thContentList[i].innerHTML);
}
}
// 所有读者的列表，最后以key-value存储到localStorage里面
let allAuthorArticleList = {};
allAuthorArticleList[uid] = this.articleList;
localStorage.setItem("allAuthorArticleList",JSON.stringify(allAuthorArticleList));
// 这样总页数就会马上更新
this.displayContent();
// let that = this;
// GM_xmlhttpRequest({
// method: "GET",
// responseType: "json",
// url: "https://bbs.tampermonkey.net.cn/home.php?mod=space&uid=2&do=thread&view=me&order=dateline&from=space",
// onload: function (xhr) {
// console.log(xhr);
// // 参考文章https://www.cnblogs.com/huoan/p/9600561.html
// if (xhr.readyState === 4 && xhr.status === 200) {
// // 拿到整个页面
// let allHtmlContent = xhr.responseText;
// let reg = /<th>[^<]*<\/th>/g;
// let contentList = allHtmlContent.match(reg);
// console.log(contentList)
// } else {
// console.log("获取数据失败");
// }
// },
// });
},
clearContent(){
localStorage.clear();
},
clearYeMianContent(){
this.articleList = []
},
displayContent(){
// 因为每个用户的uid是不一样的，所以我这样存储一下，每个用户的就以key-value的形式存到键值对里面
let uid;
// 通过url地址拿到uid
let url = window.location.href;
try{
let urlArr = url.split("&");
uid = urlArr[1].split("=")[1];
let preArticleList = JSON.parse(localStorage.getItem("allAuthorArticleList"));
for(var index in preArticleList){
if(index == uid){
this.totalPage = Math.ceil(preArticleList[uid].length/20);
// 然后把前面的先存进去
this.articleList = preArticleList[uid];
console.log(preArticleList[uid])
}
}
}
catch(err){
console.log("localStorage里面没有allAuthorArticleList属性，是不是你刚才清除了")
}
},
//控制articleList盒子的显示和隐藏
displayArticleList(){
let divHeZi = document.getElementsByClassName("articleList")[0];
if(divHeZi.style.display == "" || divHeZi.style.display == "block"){
divHeZi.style.display = "none";
} else {
divHeZi.style.display = "block";
}
},
//上一页
pre(){
if(this.currentPage == 1){
alert("默认就是从第一页开始的别点了")
} else {
this.currentPage = this.currentPage - 1;
}
},
// 下一页
next(){
this.currentPage = this.currentPage + 1;
}
}
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
}
GM_addStyle(`
#app {
position: absolute;
top: 0vh;
right: 0vw;
background: skyblue;
width: 220px;
z-index:999;
overflow:scroll;
}
.articleList {
display: block;
height:100%;
}
`)