网页制作常用代码 不断增加 [2025年7月8更新] 网页制作常用代码：一、直接使用节日代码：<!-- <script defer src="https://four-root-occupation.glitch.me/chunjie-denglong.js"></script> 春节快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/wuyi-denglong.js"></script> 五一快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/guoqing-denglong.js"></script> 国庆快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/yuandan-denglong.js"></script> 元旦快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/zhongqiu-denglong.js"></script> 中秋快乐-->二、本页总访问量1、自建busuanzi<br /> <p> 本页总访问量 <span id="busuanzi_site_pv"></span> 次</p> <script defer src="https://bsz.211119.xyz/js"></script>2、其它busuanzi<br /> <p> 本页总访问量 <span id="busuanzi_value_site_pv"></span> 次</p> <script defer src="https://four-root-occupation.glitch.me/bsz.js"></script>三、网站时间、本页总访问量及其它相关，可灵活修改式样1，访问量、运行时间和版本<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("01/05/2025 00:00:00");/*---这里是网站的启用时间--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | @ws01 v1.0.0 2025</p></span> <script defer src="https://bsz.211119.xyz/js"></script>式样2，访问量、运行时间、开源和信息<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("05/09/2024 00:00:00");/*---这里是网站的启用时间--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | 开源于 GitHub <a href="https://github.com/wszx123/My-Nav" target="_blank">@wszx123</a></p></span> <script defer src="https://bsz.211119.xyz/js"></script>式样3，访问量、运行时间、博客和导航链接<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("05/09/2024 00:00:00");/*---这里是网站的启用时间--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | <a href="https://boke.199881.xyz/" target="_blank"> <span style="color: blue;">博客 | <a href="https://www.199881.xyz/" target="_blank"> <span style="color: green;">导航 </p></span> <script defer src="https://bsz.211119.xyz/js"></script> 四、其它常用代码transform: translateY(12px); /* 子元素往下移动12px */ transform: translateY(-12px); /* 子元素往上移动12px */ justify-content: space-between; /* 子元素分散排列 */ justify-content: flex-start; /* 子元素从左侧开始排列 */ gap: 20px; /* 子元素之间的空隙 */ background: url('https://121.freewebhostmost.com/') no-repeat center center fixed; /* 背景图片 */ background-color: #f4f4f4; /* 背景色 */ min-height: 60px; /* 最小高度设置为60px */ max-height: 120px; /* 最大高度设置为120px */ font-size: 18px; /* 字号大小*/ border-radius: 5px; /* 四角弧度，一般高为5，50为圆*/ border: 2px solid gray; /* 添加2px灰色边框 */ border: 1px #aaa; /* 添加 1px 和 #aaa 色边框 */ --border-color: #aaa; /* 边框，原#436EEED */ overflow-y: auto; /* 当内容超过最大高度时显示滚动条 */ margin-left: 20px; /* 分类标签右移添加这一行 */ color: green; /* 分类标签字体颜色添加这一行 */ text-align: left; /* 添加左对齐 */ /* 设置文件名的最大宽度，并且超出部分省略显示 */ .file-name { max-width: 200px; /* 设置最大宽度，您可以调整为合适的值 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; /* 确保文件名在一行内显示 */ } footer代码.footer {position: fixed;bottom: 1cm;left: 50%;transform: translateX(-50%);background-color: rgba(230, 230, 250, 0.4);color: #000000;min-width: 400px;max-width: 1120px;height: 55px;text-align: center;margin: 2px auto;padding: 1px;border-radius: 10px;font-size:15px;}五、php代码中单位转换，其中($bytes, 1) 是保留小数点后一位，改2是二位<?php // 格式化文件大小函数 function formatSize($bytes) { $units = ['字节', 'KB', 'MB', 'GB', 'TB']; $unitIndex = 0; while ($bytes >= 1024 && $unitIndex < count($units) - 1) { $bytes /= 1024; $unitIndex++; } return number_format($bytes, 1) . ' ' . $units[$unitIndex]; } ?>六、适配手机时添加1、网页代码在手机上不适配时，在添加以下代码<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 添加viewport meta标签，确保页面在移动设备上正确缩放 -->2、大括号中添加相应代码@media (max-width: 768px) { } @media (max-width: 480px) { }七、在html页面添加输入密码才能打开1、密码24小时有效【 使用时请修改 admin 为自己的密码 】 <script> // 页面加载时弹出密码验证 (function() { // 检查是否已存储有效密码 const storedAuth = localStorage.getItem('imagePageAuth'); if (storedAuth) { const authData = JSON.parse(storedAuth); const now = new Date().getTime(); // 检查密码是否在24小时内（24*60*60*1000 = 86400000毫秒） if (now - authData.timestamp < 86400000) { // 密码仍在有效期内，允许访问 return; } else { // 密码已过期，清除存储 localStorage.removeItem('imagePageAuth'); } } // 如果没有有效密码，则要求输入 var password = prompt("请输入密码访问本页面："); if (password !== "admin") { alert("密码错误！禁止访问。"); window.location.href = "about:blank"; // 密码错误跳转至空白页 } else { // 密码正确，存储当前时间和密码信息（24小时内有效） const authData = { password: password, timestamp: new Date().getTime() }; localStorage.setItem('imagePageAuth', JSON.stringify(authData)); } })(); </script>2、密码当次有效，下一次打开也需要输入【 使用时请修改 admin 为自己的密码 】 <script> // 页面加载时弹出密码验证 (function() { var password = prompt("请输入密码访问本页面："); if (password !== "admin") { alert("密码错误！禁止访问。"); window.location.href = "about:blank"; // 密码错误跳转至空白页 } })(); </script>

用docker-compose 搭建 兰空图床【补充serv00空间创建方法】 用docker-compose 搭建 兰空图床 一、docker安装curl -fsSL https://get.docker.com | sh && ln -s /usr/libexec/docker/cli-plugins/docker-compose /usr/local/bin二、在VPS 输入命令创建目录mkdir -p /home/html/lsky-pro三、进入目录cd /home/html/lsky-pro四、创建配置文件touch docker-compose.yml配置文件中输入【端口 7791 可以根据需要修改，其它地方也可以相应修改。其中 lsky-pro-db 和 lsky-pro 在安装填写时用】：version: '3' services: lsky-pro: container_name: lsky-pro image: dko0/lsky-pro restart: always volumes: - /home/html/lsky-pro/lsky-pro-data:/var/www/html #映射到本地 ports: - 7791:80 environment: - MYSQL_HOST=mysql - MYSQL_DATABASE=lsky-pro - MYSQL_USER=lsky-pro - MYSQL_PASSWORD=lsky-pro mysql: image: mysql:8.1.0 container_name: lsky-pro-db restart: always environment: - MYSQL_DATABASE=lsky-pro - MYSQL_USER=lsky-pro - MYSQL_PASSWORD=lsky-pro - MYSQL_ROOT_PASSWORD=lsky-pro volumes: - /home/html/lsky-pro/db:/var/lib/mysql五、最后，安装即可docker compose up -d六、打开 http://ip:7791 配置 完成{dotted startColor="#ff6c6c" endColor="#1989fa"/}Serv00搭建Lsky（兰空图床） 本文参考： 摆烂随记 1、准备工作 域名 、 创建数据库 和 Lsky-pro压缩包 github项目 2、上传压缩包 到 目录 domains/域名/public_html/ 3、进行解压4、在目录 domains/域名/public_html/ 下新建一个 .htaccess 文件，输入以下内容RewriteEngine On RewriteCond %{REQUEST_URI} !^/public/ RewriteRule ^(.*)$ /public/$1 [L]5、打开网站，自行设置内容，进入面板6、通过 web-dav 或 s3 等给兰空图床扩容

【现好像已失效】用 frankenphp+mysql 快速搭建一个高性能的网站-2！ 【现好像已失效，问题末解决】用 frankenphp+mysql 快速搭建一个高性能的网站-2！本文参考 科技lion大佬 FrankenPHP 是构建在Caddy Web 服务器之上的现代 PHP 应用程序服务器。一、docker安装curl -fsSL https://get.docker.com | sh && ln -s /usr/libexec/docker/cli-plugins/docker-compose /usr/local/bin二、创建目录结构mkdir -p /home/web/{caddy,html,,mysql} touch /home/web/caddy/Caddyfile三、下载源码1、web1网站一次安装cd /home/web/html/ && mkdir web1 && cd web1 echo "define('FS_METHOD', 'direct'); define('WSZXWEB_REDIS_HOST', 'redis'); define('WSZXWEB_REDIS_PORT', '6379');" >> /home/web/html/web1/web1-config-sample.php分两次安装cd /home/web/html/ && mkdir web1 && cd web1echo "define('FS_METHOD', 'direct'); define('WSZXWEB_REDIS_HOST', 'redis'); define('WSZXWEB_REDIS_PORT', '6379');" >> /home/web/html/web1/web1-config-sample.php上传php文件【下面的 WSZXIMG 修改用大写，另一个网站从上一步增加web2并进入，下一步也要修改,6379不修改】2、web2网站cd /home/web/html/ && mkdir web2 && cd web2 echo "define('FS_METHOD', 'direct'); define('WSZXWEBB_REDIS_HOST', 'redis'); define('WSZXWEBB_REDIS_PORT', '6379');" >> /home/web/html/web2/web2-config-sample.php3、web3网站cd /home/web/html/ && mkdir web3 && cd web3 echo "define('FS_METHOD', 'direct'); define('WSZXWEBBB_REDIS_HOST', 'redis'); define('WSZXWEBBB_REDIS_PORT', '6379');" >> /home/web/html/web3/web3-config-sample.php4、web4网站cd /home/web/html/ && mkdir web4 && cd web4 echo "define('FS_METHOD', 'direct'); define('WSZXWEBBBB_REDIS_HOST', 'redis'); define('WSZXWEBBBB_REDIS_PORT', '6379');" >> /home/web/html/web4/web4-config-sample.php5、web5网站cd /home/web/html/ && mkdir web5 && cd web5 echo "define('FS_METHOD', 'direct'); define('WSZXWEBBBBB_REDIS_HOST', 'redis'); define('WSZXWEBBBBB_REDIS_PORT', '6379');" >> /home/web/html/web5/web5-config-sample.php6、web6网站【内存大的可以继续安装web7、web8等】cd /home/web/html/ && mkdir web6 && cd web6 echo "define('FS_METHOD', 'direct'); define('WSZXWEBBBBBB_REDIS_HOST', 'redis'); define('WSZXWEBBBBBB_REDIS_PORT', '6379');" >> /home/web/html/web6/web6-config-sample.php{dotted startColor="#ff6c6c" endColor="#1989fa"/}四、配置Caddyfile，以kjlion.com为例，cf上小云朵随便。nano /home/web/caddy/CaddyfileGPT建议配置。建议：简化 Caddyfile，仅使用必要配置，示例如下：{ frankenphp encode zstd gzip } kjlion.com { root * /app/public/web1 php_server } 原来配置：{ frankenphp order mercure after encode order vulcain after reverse_proxy order php_server before file_server order php before file_server } 1.kjlion.com { root * public/web1 #备注什么网站 encode zstd gzip php_server } 2.kjlion.com { root * public/web2 #备注什么网站 encode zstd gzip php_server }五、启动环境1、下载必需的yml文件wget -O /home/web/docker-compose.yml https://raw.githubusercontent.com/wszx123/gongjuxiang/refs/heads/main/.github/workflows/docker-compose-frankenphp.yml2、编辑yml文件【可编辑好后上传】nano /home/web/docker-compose.yml3、启动docker-composecd /home/web && docker-compose up -d六、安装PHP扩展，最好分两次1、安装时间有些长，不急。docker exec -it web install-php-extensions mysqli gd intl zip opcache docker exec -it web install-php-extensions exif imagick redis2、下面的最大上传100M可修改为50M或200M等，内存256M也可修改为128M或512M等docker exec web sh -c 'echo "upload_max_filesize=100M \n post_max_size=100M" > /usr/local/etc/php/conf.d/uploads.ini' docker exec web sh -c 'echo "memory_limit=256M" > /usr/local/etc/php/conf.d/memory.ini' docker exec web sh -c 'echo "max_execution_time=1200" > /usr/local/etc/php/conf.d/max_execution_time.ini' docker exec web sh -c 'echo "max_input_time=600" > /usr/local/etc/php/conf.d/max_input_time.ini'七、创建数据库， 不用数据库的可不安装 【备注1：enter password:是上一步启动环境中设置的MYSQL_ROOT_PASSWORD: webroot，备注2：上一步的 MYSQL_USER: kejilion 名称与这一步中的TO 'kejilion'@'%'; 的名称要一致】docker exec -it mysql mysql -u root -p CREATE DATABASE web1; GRANT ALL PRIVILEGES ON web1.* TO 'kejilion'@'%';八、重启环境，重新安装另一网站要重启cd /home/web && docker-compose restart

docker搭建 简单图床 easyImage2.0 docker搭建 简单图床 easyImage2.0一、提前安装好docker和docker-composecurl -fsSL https://get.docker.com | sh && ln -s /usr/libexec/docker/cli-plugins/docker-compose /usr/local/bin二、创建好放置文件夹，一般是： /home/html/easyimage 并进入文件夹cd /home/html/easyimage三、在文件夹下创建好文件 docker-compose.yml 文件，粘贴以下文档，85端口修改为自己的version: '3' services: # easyimage2.0 easyimage: image: ddsderek/easyimage:latest container_name: easyimage restart: unless-stopped ports: - '85:80' volumes: - '/opt/docker/data/easyimage/config:/app/web/config' - '/opt/docker/data/easyimage/i:/app/web/i' environment: - TZ=Asia/Shanghai - PUID=1000 - PGID=1000 - DEBUG=false四、启动docker，根据提示设置，完成即可。docker-compose up -d # 启动命令五、推荐设置1、设置 - 上传设置 - 将上传图片转换格式 webp，图片更小加快显示2、设置 - 上传设置 - 将上传文件的命名方式最好设置为唯一的MD53、设置 - 图床安全 - 登录上传，仅供自己使用，需要登录才能够上传4、设置 - 图床安全 - 游客上传限制。其它根据自己的需要设置。

Caddy2的安装与使用，轻松实现反向代理和重定向 Caddy2的安装与使用，轻松实现反向代理和重定向本文转载自： 奶油之家 1、Caddy2中文官方资料： 进入 2、关闭防火墙【好像不关也没关系】sudo ufw disable3、安装Caddy2安装必要的软件包sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https获取Caddy的安全密钥curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg从指定的 URL 下载 Caddy 的官方 GPG 密钥文件curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list更新软件包列表sudo apt update安装Caddy2sudo apt install caddy{dotted startColor="#ff6c6c" endColor="#1989fa"/}4、测试：创建静态页面进入/etc/caddy，打开Caddyfile，清空文件内容，然后输入下面的代码【/var/www/html是静态页面文件夹，也可以修改为自己熟悉的文件夹，如/home/html等】解析好的域名 { root * /var/www/html file_server }创建静态mkdir -p /var/www/html进入/var/www/html文件夹并创建文件index.html打开index.html，输入下面的代码【也可以是你自己的 html 代码】<!DOCTYPE html> <html> <body> <h1>自由之家</h1> <p>欢迎来到我们的网站</p> </body> </html>5、Caddy2相关命令 ，每更改完后请执行 重启Caddy2# 启动Caddy2 systemctl start caddy # 开机自启 systemctl enable caddy # 重启Caddy2 systemctl restart caddy # 停止Caddy2 systemctl stop caddy # 重载配置Caddy配置文件（修改配置文件后执行） systemctl reload caddy # 查看Caddy2运行状态 systemctl status caddy6、Caddy2的应用 ，实际应用时可以举一反三设置反代解析好的域名 { reverse_proxy 127.0.0.1:8080 #这里输入你想反代的服务器IP和端口 encode gzip }设置重定向解析好的域名 { redir https://naiyous.com{uri} }

html网页实用代码 一、开站时间开始 <!-- 开站时间开始1，有天、时、分、秒 --> <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("07/01/2023 00:00:00");/*---这里是网站的启用时间--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒"; } setInterval("createtime()",250); <!-- 开站时间结束 --> <!-- 开站时间开始2，只显示天 --> <span <p> 本页总访问量 <span id="busuanzi_value_site_pv"></span> 次 | @ws01 v1.0.0 2025</p></span> <script defer src="https://four-root-occupation.glitch.me/bsz.js"></script> <span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("09/05/2024 00:00:00");/*---这里是网站的启用时间--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> 二、本页总访问量代码 <p> 本页总访问量 <span id="busuanzi_value_site_pv"></span> 次</p> <script defer src="https://four-root-occupation.glitch.me/bsz.js"></script>三、几个节日灯笼代码1、春节快乐灯笼代码<script defer src="https://four-root-occupation.glitch.me/chunjie-denglong.js"></script>2、国庆快乐灯笼代码<script defer src="https://four-root-occupation.glitch.me/guoqing-denglong.js"></script>3、五一快乐灯笼代码<script defer src="https://four-root-occupation.glitch.me/wuyi-denglong.js"></script>4、中秋快乐灯笼代码<script defer src="https://four-root-occupation.glitch.me/zhongqiu-denglong.js"></script>5、元旦快乐灯笼代码<script defer src="https://four-root-occupation.glitch.me/yuandan-denglong.js"></script>四、html代码变cloudflare workers 代码html代码最前面加上addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { const html = `最后加上`; return new Response(html, { headers: { 'content-type': 'text/html;charset=UTF-8' }, }); }五、页脚信息全在一行上1、添加footer代码，可进行适当调整 .footer { width: 100%; max-width: 800px; margin: 0 auto; padding: 5px 0; background-color: #f0f0f0; color: #666; font-size: 14px; text-align: center; box-sizing: border-box; }2、网页中添加页脚 <div class="footer"> <span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("01/05/2025 00:00:00");/*---这里是网站的启用时间，分别显示月-日-年 --*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_value_site_pv"></span> 次 | @ws01 v1.0.0 2025</p></span> <script defer src="https://four-root-occupation.glitch.me/bsz.js"></script>

html实用图片代码 实用图片代码1<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='lightyellow'/><text x='50%' y='50%' font-size='50' text-anchor='middle' alignment-baseline='middle'>🌻</text></svg>" alt="向日葵图案">说明circle 元素用于绘制一个圆形背景，设置在 SVG 的中心位置。cx='50' 和 cy='50' 表示圆心在 (50, 50) 的位置。r='45' 表示圆的半径为 45。fill='lightyellow' 设置圆形的填充色为浅黄色。text 元素用于显示向日葵表情符号，并调整其位置和大小。x='50%' 和 y='50%' 将表情符号放置在圆形的中心。text-anchor='middle' 和 alignment-baseline='middle' 用于确保文本在中心对齐。这样，图片将显示一个浅黄色背景的向日葵表情符号。实用图片代码2data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>💠</text></svg>

使用油猴插件进行关键词屏蔽 使用油猴插件进行关键词屏蔽 本文转载自：https://www.nodeseek.com/post-109394-1关键词列表【关键词仅为个人主观添加，具体自己增删】viie,tuan,跑路云,bestvm,富婆,台妹,usercloud,wise,ocbc,giffgaff,京东,esim,redotpay,batvm,电话卡,虚拟卡,dv,尼区,epic,nnr,庆余年,88vip,bagevm,8v,1v,32v,host-c,尼日利亚,绿云,follow,Yxvm改良版 相较于原版的区别是关键词不区分大小写，注释掉了帖子内容和楼层的关键词屏蔽，只根据标题屏蔽，你也可以取消注释。// ==UserScript== // @name nodeseek论坛屏蔽词 // @namespace http://tampermonkey.net/ // @version 2023-12-30 // @description 为nodeseek论坛添加屏蔽词功能 // @author bigQY // @match *://www.nodeseek.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=nodeseek.com // @grant none // @require https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js // @license MIT // @downloadURL https://update.greasyfork.org/scripts/483014/nodeseek%E8%AE%BA%E5%9D%9B%E5%B1%8F%E8%94%BD%E8%AF%8D.user.js // @updateURL https://update.greasyfork.org/scripts/483014/nodeseek%E8%AE%BA%E5%9D%9B%E5%B1%8F%E8%94%BD%E8%AF%8D.meta.js // ==/UserScript== (function() { 'use strict'; // 设置按钮 var headerDiv = document.querySelector("#nsk-head") var btn = document.createElement("button"); btn.innerHTML = "屏蔽词设置"; btn.classList.add("btn"); btn.style = "margin-left: 10px;"; headerDiv.appendChild(btn); // 设置面板 var panel = document.createElement("div"); panel.innerHTML = ` <div id="ns-block-words-setting"> <h2>屏蔽词设置</h2> <input type="checkbox" id="ns-block-words-checkbox-enable" name="ns-block-words-checkbox-enable" checked /> <label for="ns-block-words-checkbox-enable">启用屏蔽词</label> <br/> <input type="checkbox" id="ns-block-words-checkbox-hide" name="ns-block-words-checkbox-enable" checked /> <label for="ns-block-words-checkbox-hide">不显示被屏蔽的帖子或楼层</label> <br/> <p>屏蔽词列表（逗号分隔）</p> <textarea id='ns-block-words' style='width: 98%; height: 50vh;'></textarea> <br/> <div style="display: flex;justify-content: end;margin:10px"> <button id='ns-block-words-btn-save' class='btn' style="margin:0 10px">保存</button> <button id='ns-block-words-btn-cance' class='btn'>取消</button> </div> </div> `; panel.style = ` position: fixed; top: 10vh; left: 10vw; z-index: -1; display: block; width: 80vw; height: 0; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; backdrop-filter: blur(10px); padding:20px; transition: all 0.5s; opacity: 0; overflow: hidden; `; document.body.appendChild(panel); // 设置按钮点击事件 btn.onclick = function() { showSetting(); document.getElementById("ns-block-words").value = localStorage.getItem("ns-block-words"); }; // 保存按钮点击事件 document.getElementById("ns-block-words-btn-save").onclick = function() { localStorage.setItem("ns-block-words", document.getElementById("ns-block-words").value); localStorage.setItem("ns-block-words-enable", document.getElementById("ns-block-words-checkbox-enable").checked); localStorage.setItem("ns-block-words-hide", document.getElementById("ns-block-words-checkbox-hide").checked); hideSetting(); }; // 取消按钮点击事件 document.getElementById("ns-block-words-btn-cance").onclick = function() { hideSetting(); }; function showSetting() { panel.style.zIndex = 9998; panel.style.opacity = 1; panel.style.height = "80vh"; } function hideSetting() { panel.style.opacity = 0; panel.style.height = "0"; setTimeout(function() { if(panel.style.opacity == 0){ panel.style.zIndex = -1; } }, 500); } // dom ready初始化 $(document).ready(function() { // 屏蔽词列表 var blockWords = localStorage.getItem("ns-block-words"); if (blockWords == null) { blockWords = ""; } blockWords = blockWords.split(","); // 启用屏蔽词 var enable = localStorage.getItem("ns-block-words-enable"); enable = enable == 'true' ? true : false; var checkbox = document.getElementById("ns-block-words-checkbox-enable"); checkbox.checked = enable; // 隐藏屏蔽词 var hide = localStorage.getItem("ns-block-words-hide"); hide = hide == 'true' ? true : false; var checkbox2 = document.getElementById("ns-block-words-checkbox-hide"); checkbox2.checked = hide; // 屏蔽词列表 var textarea = document.getElementById("ns-block-words"); textarea.value = blockWords.join(","); // 屏蔽词 if (enable) { /* // 帖子界面 var comments = document.querySelectorAll(".content-item"); if (comments != null) { comments.forEach(function(comment) { var content = comment.querySelector(".post-content"); var contentText = content.innerText.toLowerCase(); // 将文本转换为小写 blockWords.forEach(function(word) { if (contentText.indexOf(word.toLowerCase()) != -1) { // 比较时将屏蔽词转换为小写 if (word==="") return; if (hide) { comment.style.display = "none"; } else { content.innerHTML = `<span style="color: red;">触发屏蔽词：${word}</span>` } } }); }); } */ // 列表界面 var posts = document.querySelectorAll(".post-list-content"); if (posts != null) { posts.forEach(function(post) { var content = post.querySelector(".post-title > a"); var contentText = content.innerText.toLowerCase(); // 将文本转换为小写 blockWords.forEach(function(word) { if (contentText.indexOf(word.toLowerCase()) != -1) { // 比较时将屏蔽词转换为小写 if (word==="") return; if (hide) { post.parentNode.style.display='none' } else { content.innerHTML = `<span style="color: red;">触发屏蔽词：${word}</span>` } } }); }); } } }); })();