fanta
火狐狸
火狐狸
  • UID30401
  • 注册日期2009-09-17
  • 最后登录2024-02-05
  • 发帖数229
  • 经验160枚
  • 威望0点
  • 贡献值114点
  • 好评度5点
  • 社区居民
  • 忠实会员
30楼#
发布于:2022-10-12 10:32
逗妇乳:document.addEventListener('DOMContentLoaded', function (e) {
    // 这里写代码
}, false);可能是脚本加载太快?
回到原帖
愚蠢的我找到原因了 没在safari的tampermonkey 中加// @require https://code.jquery.com/jquery-xxx.js
firefox不加不运行,safari以前一直不加也没事运行好好的....很困惑,以前怎么就行,现在才不加载,现在不加也经常有效,神奇,是缓存什么的原因吧...
2.我百度搜到的 加什么版本jquery的都有
https://releases.jquery.com/git/jquery-3.x-git.min.js 这个是jQuery v3.6.2-pre
https://code.jquery.com/jquery-latest.js 这个是1.11.1,都latest怎么会是1.11这么老的版本
我去官网 看现在提供下载的正规版本是3.6.1 所以我现在加的是// @require      https://code.jquery.com/jquery-3.6.1.min.js
到底应该用哪个版本...对我是不是都一个鸟样....


最后这个简单的解决了 编辑掉...哈哈 我看没回复 估计是很简单 懒得理我 我就瞎试了下 成了...果然简单
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
31楼#
发布于:2022-10-13 09:41
fanta:愚蠢的我找到原因了 没在safari的tampermonkey 中加// @require https://code.jquery.com/jquery-xxx.js
firefox不加不运行,safari以前一直不加也没事运行好好的.....
回到原帖
你想多了,我不是每天上这里的
fanta
火狐狸
火狐狸
  • UID30401
  • 注册日期2009-09-17
  • 最后登录2024-02-05
  • 发帖数229
  • 经验160枚
  • 威望0点
  • 贡献值114点
  • 好评度5点
  • 社区居民
  • 忠实会员
32楼#
发布于:2022-10-15 22:51
逗妇乳:你想多了,我不是每天上这里的回到原帖
高手~ 我又来了 是个大大大工程,
jhssd.com这个nb的盗x版网站(你说过不让VPS IP访问) 本周相继迎来2次"反盗x版"重大更新
例如这个页面https://www.jhssd.com/5964/27546748_2.html
what's new:
第一次重大更新: 把29个常用汉字变成图片,这样就不能整体复制黏贴了,对我来说就是.replace()失效了
机智如我用下面这行搞定了,
.replace(/<img src="\/t\/1\.png">/g, "不").replace(/<img src="\/t\/2\.png">/g, "出").replace(/<img src="\/t\/3\.png">/g, "大").replace(/<img src="\/t\/4\.png">/g, "道").replace(/<img src="\/t\/5\.png">/g, "个").replace(/<img src="\/t\/6\.png">/g, "过").replace(/<img src="\/t\/7\.png">/g, "和").replace(/<img src="\/t\/8\.png">/g, "可").replace(/<img src="\/t\/9\.png">/g, "来").replace(/<img src="\/t\/10\.png">/g, "们").replace(/<img src="\/t\/11\.png">/g, "你").replace(/<img src="\/t\/12\.png">/g, "前").replace(/<img src="\/t\/13\.png">/g, "去").replace(/<img src="\/t\/14\.png">/g, "人").replace(/<img src="\/t\/15\.png">/g, "上").replace(/<img src="\/t\/16\.png">/g, "时").replace(/<img src="\/t\/17\.png">/g, "是").replace(/<img src="\/t\/18\.png">/g, "他").replace(/<img src="\/t\/19\.png">/g, "她").replace(/<img src="\/t\/20\.png">/g, "太").replace(/<img src="\/t\/21\.png">/g, "天").replace(/<img src="\/t\/22\.png">/g, "我").replace(/<img src="\/t\/23\.png">/g, "下").replace(/<img src="\/t\/24\.png">/g, "小").replace(/<img src="\/t\/25\.png">/g, "要").replace(/<img src="\/t\/26\.png">/g, "有").replace(/<img src="\/t\/27\.png">/g, "在").replace(/<img src="\/t\/28\.png">/g, "这").replace(/<img src="\/t\/29\.png">/g, "中")

虽然很蠢,时效也短,网站还会定期更新这些图片,就得改,不过我很闲...同时时效也不是特别短,因为一改,cookie就得更新,貌似还需要删除,
很容易造成文字混乱,让读者远离, 不知道有没有更好的解决办法?当然不看这个网站就解决了......

第二次重大更新: 就是2天前,用大量的类似的<span class="_ea6ds1ebkgwmfy3y"></span>代替一个汉字,底部增加代码如下:
&lt;style&gt;
@font-face {
    font-family: "wshp_100_1";
    src: url("/jhssd/fonts/wshp_100_1.ttf");
}
  
._vywcmxpg5ce03ehb:before {
    content: "\7684";
}
  
._rwiydli7dzcwy96f:before {
    content: "\5c31";
}

菜鸟我只想说nb大了,这个和起点反盗x版反义词有一拼啊,
我只会测试一个一个手动还原成功,但是这个第二次重大更新有个重大突破,class名称都是随机生成的,每刷新一次页面都会更新,我不会编程,无可奈何啊~
我只能有个思路,
先匹配 <span class="_ea6ds1ebkgwmfy3y"></span>
再匹配查找出对应的 content: "\1234" 并替换为"\u1234"
再nr_content.innerHTML = nr_content.innerHTML.replace( "<span class="_ea6ds1ebkgwmfy3y"></span>", "\u1234")
不停循环替换... 不知道对不对,弯不弯,行不行...
抽空帮我写下吧,这个好像挺难的,反正靠我这个百度"高手"是写不出来的
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
33楼#
发布于:2022-10-16 15:14
fanta:高手~ 我又来了 是个大大大工程,
jhssd.com这个nb的盗x版网站(你说过不让VPS IP访问) 本周相继迎来2次"反盗x版"重大更新
例如这个页面https://www.jhssd.com/5964/27546748_2.ht...
回到原帖

let nr_content = document.querySelector(".nr_content");
if (nr_content)
    [...nr_content.querySelectorAll('span[class^="_"]')].map(e =&gt; {
        return {
            search: e.outerHTML,
            replace: getComputedStyle(e, ':before').getPropertyValue('content').replace(/"/g, "")
        }
    }).forEach(pair =&gt; {
        nr_content.innerHTML = nr_content.innerHTML.replaceAll(pair.search, pair.replace)
    });
fanta
火狐狸
火狐狸
  • UID30401
  • 注册日期2009-09-17
  • 最后登录2024-02-05
  • 发帖数229
  • 经验160枚
  • 威望0点
  • 贡献值114点
  • 好评度5点
  • 社区居民
  • 忠实会员
34楼#
发布于:2022-10-16 16:47
逗妇乳:let nr_content = document.querySelector(".nr_content");
if (nr_content)
    [...nr_content.querySelectorAll('span')].m...
回到原帖
我只想说太tmd强了~~~~~~~ 非常感谢!!!! 阿里嘎多~够咋衣麻斯
有个小问题,    [...nr_content.querySelectorAll('span[class^="_"]')].map(e => {这行前面出现黄底叹号 eslint: curly - Expected { after 'if' condition.  不知道是什么原因,但是不影响使用,一切正常
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
35楼#
发布于:2022-10-16 18:47
fanta:我只想说太tmd强了~~~~~~~ 非常感谢!!!! 阿里嘎多~够咋衣麻斯
有个小问题,    [...nr_content.querySelectorAll('span')].map(e => {这行前面出现黄底叹号 eslint: c...
回到原帖
eslint 检查器要求 if 语句 用 { },用偷懒语法就会提醒
fanta
火狐狸
火狐狸
  • UID30401
  • 注册日期2009-09-17
  • 最后登录2024-02-05
  • 发帖数229
  • 经验160枚
  • 威望0点
  • 贡献值114点
  • 好评度5点
  • 社区居民
  • 忠实会员
36楼#
发布于:2022-10-19 16:45
逗妇乳:eslint 检查器要求 if 语句 用 { },用偷懒语法就会提醒回到原帖

好奇宝宝我又出现了... 带来2个新的问题~
1 csdn.net这个网站很多页面例如这个页面https://blog.csdn.net/HYHhmbb/article/details/127049968
都有一个repeat的背景 造成大量cpu占用,我百度找到了办法
https://bbs.csdn.net/topics/394886758?list=75340974
就是屏蔽css或者这个bg.gif
请问 如何找到 这个图片的地址https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-whitemove/images/bg.gif
我也知道是这个图片造成的,自己瞎找了半天,但是是真找不到,还好我是百度小能手.您找的话会如何找到它,我很想学习下
还有 有没有什么办法知道一个网页是哪个js或者图片之类的大量占用资源,这样就可以用adguard adplus之类的屏蔽了

2 在您的大力帮助下,我现在基本掌握改写95%的小说网站了,绝大部分问题都已解决或者曲线搞定.
而且最终我发现很多元素无需绞尽脑汁想招屏蔽,直接全部去掉重写最方便快捷.
然后我就重新弄,发现以前很多做法简直就是浪费感情,虽然学到了一些东西.例如控制台的简单使用,css js部分最基础知识...
以这个网址https://www.bidige.com/book/40402/727233.html为例
,我改写后代码如下,
// ==UserScript==
// @name         test
// @version      4.0
// @description  special thanks to doufuru
// @author       copy & paste
// @match        https://www.bidige.com/book/40402/*.html
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.1.min.js
// ==/UserScript==
/* globals jQuery, $, waitForKeyElements */
(function() {
  'use strict';
     
  document.head.innerHTML = `
    &lt;style&gt;
      body {
        position:       absolute;
        top:            0;
        right:          9px;
        width:          980px;
        padding:        0;
        margin:         0;
        font:           30px/1.5 "微软雅黑";
        color:          blue;
        letter-spacing: 0.2em;
        text-indent:    0;
        box-sizing:     content-box;
        -webkit-font-smoothing: subpixel-antialiased;
        background:     black;
      }
      a {
        color:          pink;
        text-decoration: none;
      }
      #newweb {
      }
      .newtop {
        margin:         8px 0 -17px;
        font:           30px/1.5 "隶变-简";
        color:          orange;
        letter-spacing: 1px;
        text-indent:    8px;
        text-align:     left;
      }
      .newhr {
        font:           30px/1.5 "隶变-简";
        color:          darkolivegreen;
        letter-spacing: 0.2em;
        text-indent:    0;
        text-align:     center;
      }
      .newhr a {
        color:          darkkhaki;
      }
      .newcontent {
        margin:         3px 0;
        font:           30px/1.5 "微软雅黑";
        color:          white;
        letter-spacing: 0.2em;
        text-indent:    2.2em;
        text-align:     left;
      }
    &lt;/style&gt;`;
     
     
    let aprev, alist, anext;
      aprev = document.querySelector(".bottem2 &gt; a:nth-child(1)");
      alist = document.querySelector(".bottem2 &gt; a:nth-child(2)");
      anext = document.querySelector(".bottem2 &gt; a:nth-child(3)");
      addEventListener('keyup', (e) =&gt; {
        if(e.keyCode == 37){
          aprev && aprev.click();
        } else if(e.keyCode == 39){
          anext && anext.click();
        } else if(e.keyCode == 13){
          alist && alist.click();
        }
      })
     
     
  let newcontent = document.querySelector("#content");
     
  document.body.innerHTML = `
    &lt;div id = "newweb"&gt;
      &lt;div class = "newtop"&gt;
        test
      &lt;/div&gt;
        &lt;div class = "newhr"&gt;
           ~~~~~~~~~~~~~~~~~~~
           &lt;a href=${aprev}&gt;『· &lt;/a&gt;&lt;a href=${alist}&gt;目录&lt;/a&gt;&lt;a href=${anext}&gt; ·』&lt;/a&gt;
           ~~~~~~~
        &lt;/div&gt;
      &lt;div class = "newcontent"&gt;
        ${newcontent.innerHTML}
      &lt;/div&gt;
    &lt;/div&gt;`;
     
})();
很多东西去掉了,存在2个问题,1是键盘左右方向键翻页失灵了,所以里面加入了原先别人教我的代码
addEventListener('keyup', (e) =&gt; {
        if(e.keyCode == 37){
          aprev && aprev.click();
...
再就是 我不能实时缩放网页字体了,原网站的办法似乎也不好.所以还是
请您帮我在网页的最上方
加入一个 文章正文字体 放大缩小的部分,就像这样
 - [30号] +
点击-或+字体缩放,中间显示字体大小 ,同时响应键盘-键和=键缩放字体
是不是用那个  addEventListener('keyup', (e) =>  下面加入新的代码就行,还是应该用更好更合理的办法
------------------------
还有一个不是问题的问题,原先这行
aprev = document.querySelector(".bottem2 > a:nth-child(1)");
我是写成
aprev = document.querySelector(".bottem2 > a:nth-child(1)").href;这样取得地址的,下方的链接
<a href=${aprev}>『· </a><a href=${alist}>目录</a><a href=${anext}> ·』</a> 就正常
后来我为了响应键盘左右方向键,把后面的.href去掉了,结果下方的链接
<a href=${aprev}>『· </a><a href=${alist}>目录</a><a href=${anext}> ·』</a> 还正常
这是为什么呢...为什么不需要改动呢..应不应该改下呢
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
37楼#
发布于:2022-10-19 20:55
fanta:好奇宝宝我又出现了... 带来2个新的问题~
1 csdn.net这个网站很多页面例如这个页面https://blog.csdn.net/HYHhmbb/article/details/127049968
都有一个repeat的背景 造...
回到原帖
先回你第一个问题,找图片这个需要一点经验,首先动图第一想到的是gif,直接打开 F12 网络里搜 gif ,没几个图片就找到
有时候如果找不到图片可能是 js 绘制的,试试禁用 js ,如果禁用 js 不见了,那可坑就是 js 绘制的

当然我也遇到过 css + 普通图片实现的,一般就在 html body 这几层占满网页的 标签里, 最多可能在 :before :after 伪元素里


第二个问题晚点,要是没时间就得明天了
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
38楼#
发布于:2022-10-19 21:15
fanta:好奇宝宝我又出现了... 带来2个新的问题~
1 csdn.net这个网站很多页面例如这个页面https://blog.csdn.net/HYHhmbb/article/details/127049968
都有一个repeat的背景 造...
回到原帖
第二个问题不是很懂你处理这么多,隐藏非主阅读区以外不就行了嘛
#wrapper &gt; :not(#content_read) {
  display: none;
}
我看小说的网站基本是这么处理
fanta
火狐狸
火狐狸
  • UID30401
  • 注册日期2009-09-17
  • 最后登录2024-02-05
  • 发帖数229
  • 经验160枚
  • 威望0点
  • 贡献值114点
  • 好评度5点
  • 社区居民
  • 忠实会员
39楼#
发布于:2022-10-19 21:49
逗妇乳:第二个问题不是很懂你处理这么多,隐藏非主阅读区以外不就行了嘛
#wrapper &gt; :not(#content_read) {
  display: none;
}我看小说的网站基本是这么处理
回到原帖
我去 我不会这么弄...  :not,我孤陋寡闻,不知道这个用法
我这不出蠢笨绝招了吗... 不过这么弄对我有个好处, 其他网站 我也可以这么干

例如另一个小说网站jhssd.com我基本修改这个 let newcontent = document.querySelector("#content"); 为#nr_content就可以了
其他即使不是小说站点,也行

还有个问题,现在这个强悍的拥有反盗x版的网站把每一章分成多页了  强制分割 断句看的我很难受
如何 把上一页的最后20个字 放到新页面的最上方显示 ,这个涉及到传递参数,我又不会了...
https://www.jhssd.com/2920/28153763.html例如这个 底下显示的是 上一章 下一页  以前都是 上一章 下一章
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
40楼#
发布于:2022-10-19 23:26
【求助】addMenuPlus.uc.js 新增全页面截图菜单无法在 GitHub 截图
fanta:我去 我不会这么弄...  :not,我孤陋寡闻,不知道这个用法
我这不出蠢笨绝招了吗... 不过这么弄对我有个好处, 其他网站 我也可以这么干

例如另一个小说网站jhssd.com我基本修改这个 let newcontent = ...
回到原帖
我也不会,没研究过写油猴,这类可以使用“东方永页机” 翻页拼接
然后监控一下内容变更,有变更就替换一下
document.querySelector("#nr").addEventListener("DOMNodeInserted", function (){
// 这里调用替换函数
})
fanta
火狐狸
火狐狸
  • UID30401
  • 注册日期2009-09-17
  • 最后登录2024-02-05
  • 发帖数229
  • 经验160枚
  • 威望0点
  • 贡献值114点
  • 好评度5点
  • 社区居民
  • 忠实会员
41楼#
发布于:2022-10-20 03:47
逗妇乳:我也不会,没研究过写油猴,这类可以使用“东方永页机” 翻页拼接
然后监控一下内容变更,有变更就替换一下
document.querySelector("#nr").addEventListener("DOMNodeInserted", ...
回到原帖
我百度到答案了,
就是把链接由原来的xxx 变成xxx?上一页的20个汉字 发送即可 英文直接发 中文需要编码, 然后window.location.search取到发送的汉字 解码即可


这也算基础知识,看了好几个帖子才明白原理, 然后折腾了我好长时间才解决了1处卡死我的难题
if (window.location.search) {
  newcontent.innerText = decodeURI(window.location.search).replace(/^\?/, '').replace(/.*\n/, "").replace(/^\s*/, "") + newcontent.innerText;        
}
if ($("#nexturl").text() == "下一页") {
  var send = encodeURI("?" + newcontent.innerText.substr(-20,20));
  anext.href = anext.href + send;// 更新链接
  next_page = next_page + send;//  更新链接 next_page是原网页里面的变量 键盘← →翻页用
}
您还是帮我写一下,我开始问的 正文 缩放吧~~~
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
42楼#
发布于:2022-10-20 11:15
fanta:我百度到答案了,
就是把链接由原来的xxx 变成xxx?上一页的20个汉字 发送即可 英文直接发 中文需要编码, 然后window.location.search取到发送的汉字 解码即可


这也算基础知识,看了好几个帖子才明白原理...
回到原帖
本来就有文本字号设置,不够用吗?
fanta
火狐狸
火狐狸
  • UID30401
  • 注册日期2009-09-17
  • 最后登录2024-02-05
  • 发帖数229
  • 经验160枚
  • 威望0点
  • 贡献值114点
  • 好评度5点
  • 社区居民
  • 忠实会员
43楼#
发布于:2022-10-20 12:11
逗妇乳:本来就有文本字号设置,不够用吗?回到原帖



我竟然搞定了!!!!!!!!!!!!!!!https://www.runoob.com/js/js-cookies.html

看了一个cookie教程的序章...就像C语言的helloworld一样..复制黏贴后,.就有效果了,就是排错弄了我好长时间啊,放的位置不对,总出问题,我都准备好发帖问,我到底错在哪里了, 真的不容易啊 :)
逗妇乳
小狐狸
小狐狸
  • UID50148
  • 注册日期2015-06-01
  • 最后登录2024-01-02
  • 发帖数86
  • 经验92枚
  • 威望0点
  • 贡献值32点
  • 好评度6点
44楼#
发布于:2022-10-22 12:37
// ==UserScript==
// @name Novels Reading Helper
// @author Ryan
// @version 1.0
// @encoding utf-8
// @license https://creativecommons.org/licenses/by-sa/4.0/
// @icon https://gcore.jsdelivr.net/gh/benzBrake/FirefoxCustomize@master/images/FireDoge.ico
// @homepage https://github.com/benzBrake/FirefoxCustomize/tree/master/UserScript
// @match https://www.jhssd.com/*/*.html
// @match https://www.bidige.com/book/*/*.html
// @grant GM_addStyle
// ==/UserScript==
"use strict";
(function () {
    const { document, location, console, customElements } = window;
    const Rules = {
        "www.bidige.com": {
            "style": `#wrapper &gt; :not(#content_read) {
                display: none;
            }`,
            "contentSel": "#content" // 内容选择器
        }
    }
 
    // 插入公共样式
    GM_addStyle(`
    .flex {
        display: flex;
    }
    .j-center {
        justify-content: center;
    }
    .nrh-toolbar {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: var(--toolbar-height, 32px);
        top: calc(0px - var(--toolbar-height, 32px));
        transition: top .5s ease-in-out;
        box-shadow: 0px 0px 8px -5px hsla(240, 4%, 0%, 0.5), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2) !important;
    }
    .nrh-toolbar.sticky {
        top: 0;
    }
    .nrh-container {
        width: 100%;
        height: var(--toolbar-height, 32px);
        background-color: var(--toolbar-background, #fff);
    }
    .nrh-button {
        padding: 4px;
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        user-select:none;
    }
    .nrh-button:hover {
        background-color: var(--toolbar-background-hover, #B5B9C8);
    }
    .nrh-zoom-level {
        height: 24px;
        padding: 4px;
        outline: none;
        width: 32px;
        cursor: default;
        text-align: center;
    }
    .input-error{
        outline: 1px solid red;
      }
    `);
 
    window.NrhToolBar = {
        init(domain) {
            let _config = Rules[domain] || {};
            this.config = Object.assign({
                toolbarInsertPoint: "body",
                contentSel: "body"
            }, _config);
            // 插入专用样式
            if (this.config.style)
                GM_addStyle(this.config.style);
            let insertPoint = document.querySelector(this.config.toolbarInsertPoint);
            if (insertPoint && !this.inited) {
                this.inited = true;
                this.toolbar = insertPoint.appendChild(
                    $C("div", {
                        class: "nrh-toolbar sticky",
                        style: "--toolbar-height: 32px"
                    })
                );
                this.container = this.toolbar?.appendChild($C("div", { class: "nrh-container flex j-center" }));
                this.initZoom();
                this.lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
                window.addEventListener("scroll", this);
            } else {
                console.error("Cannot find a insert point: " + sel || "html");
            }
        },
        initZoom() {
            this.contentEl = document.querySelector(this.config.contentSel);
            if (!this.contentEl) return;
            this.zoomLevel = parseInt(localStorage.getItem("zoomLevel") || getComputedStyle(this.contentEl).getPropertyValue("font-size")); // 读取默认字号
            this.zoomContainer = $C("div", {
                class: "nrh-zoom flex j-center",
            });
            this.container.appendChild(this.zoomContainer);
            let zoomOut = $C('span', {
                class: "nrh-zoom-out nrh-button",
                zoom: "-",
                content: "-"
            });
            zoomOut.addEventListener('click', this);
            let zoomOut5 = $C('span', {
                class: "nrh-zoom-out nrh-button",
                zoom: "-",
                content: "--",
                step: 5
            });
            zoomOut5.addEventListener('click', this);
            this.zoomContainer.appendChild(zoomOut5);
            this.zoomContainer.appendChild(zoomOut);
            let zoomInput = $C('input', {
                class: "nrh-zoom-level",
                value: this.zoomLevel,
                readonly: "readonly"
            });
            this.zoomContainer.appendChild(zoomInput);
            let zoomIn = $C('span', {
                class: "nrh-zoom-in nrh-button",
                zoom: "+",
                content: "+"
            });
            zoomIn.addEventListener('click', this);
            let zoomIn5 = $C('span', {
                class: "nrh-zoom-in nrh-button",
                zoom: "+",
                content: "++",
                step: 5,
                style: "letter-spacing: -3px;"
            });
            zoomIn5.addEventListener('click', this);
            this.zoomContainer.appendChild(zoomIn);
            this.zoomContainer.appendChild(zoomIn5);
            var that = this;
            setTimeout(function () {
                that.setZoomLevel(that.zoomLevel);
            }, 300);
        },
        getZoomLevel() {
            return this.zoomLevel;
        },
        setZoomLevel(level) {
            if (level &lt; 1) level = 1;
            this.zoomLevel = level;
            this.contentEl.style.setProperty("font-size", level + "px");
            this.zoomContainer.querySelector("input").value = level;
            localStorage.setItem("zoomLevel", level); // 存储字号
        },
        handleEvent(event) {
            let { target } = event;
            switch (event.type) {
                case "scroll":
                    var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
                    if (st &gt; this.lastScrollTop + 50) {
                        // 向下滚动
                        this.toolbar?.classList.remove("sticky");
                    } else {
                        // 向上滚动
                        this.toolbar?.classList.add("sticky");
                    }
                    var t;
                    clearTimeout(t);
                    t = setTimeout(() =&gt; {
                        var t = this.lastScrollTop = st &lt;= 0 ? 0 : st; // For Mobile or negative scrolling
                    }, 200);
                    break;
                case "click":
                    event.preventDefault();
                    event.stopPropagation();
                    if (target.hasAttribute("zoom")) {
                        let step = parseInt(target.getAttribute("step") || "1");
                        switch (target.getAttribute("zoom")) {
                            case "-":
                                this.setZoomLevel(this.getZoomLevel() - step);
                                break;
                            case "+":
                                this.setZoomLevel(this.getZoomLevel() + step);
                                break;
                            case "custom":
                                this.zoomContainer.classList.add("custom");
                                break;
                        }
                    }
                    break;
            }
        }
    }
 
    window.NrhToolBar.init(location.host);
 
    function $C(tag, attrs, skipAttrs) {
        let el = document.createElement(tag);
        attrs = attrs || {};
        // check skipAttrs if is array
        if (!skipAttrs || skipAttrs.constructor !== Array) {
            skipAttrs = [];
        }
        skipAttrs.push("content");
        for (let p in attrs) {
            if (skipAttrs.indexOf(p) === -1) {
                el.setAttribute(p, attrs[p]);
 
            }
        }
        if (attrs.content)
            el.innerHTML = attrs.content;
        return el;
    }
})();
游客

返回顶部