全国免费咨询:

13245491521

VR图标白色 VR图标黑色
X

中高端软件定制开发服务商

与我们取得联系

13245491521     13245491521

2025-06-26_被对象嘲讽,写个网页护眼宝你都不会么

您的位置:首页 >> 新闻 >> 行业资讯

被对象嘲讽,写个网页护眼宝你都不会么 (金石计划5天倒计时,速戳上图了解详情) 引言最近对象天天晚上加班看网页,眼睛一直不舒服,然后她就想下一个护眼包,让网页不那么亮。然后,她的电脑就就自动安装了很多软件,什么「小鸟壁纸、360 浏览器、金山毒霸、2345、鲁大师」...... ?再然后,她就生气的对我说,你不是开发网页的么,就不能给我开发个网页护眼工具么! ?嗐,你还别说,我真会! 网页主题快速切换原理网页护眼,不就是实现网页主题切换嘛!前几天,前端梦工厂[1]大佬分享了一篇文章[2],就介绍了一种非常简单高效实现网页主题切换的效果。 它的原理非常简单,只需要一行代码就实现任意网页的主题切换 html { filter: invert(1) hue-rotate(180deg); } ?CSS 的filter(滤镜)属性可以为网页元素添加图像效果,例如模糊、反色或色调变化等。其中,filter: invert(1) hue-rotate(180deg)是一组常用于暗黑模式的滤镜组合: invert(1)会将颜色进行反转,使亮色变暗;hue-rotate(180deg)调整颜色的色调,避免纯反色带来的不自然感。?结合这两个滤镜效果,我们可以快速实现整个网页的颜色切换,从而达到一键切换主题的目的。 但是,这个方法有一定瑕疵,图片和视频也会被整体反转造成色彩失真,但可以为img和video元素单独指定反向滤镜,使其颜色恢复正常 /*图片、视频等元素不需要处理*/ img, video, .logo, .icon /*可继续添加可以不用处理的元素*/ { filter: invert(1) hue-rotate(180deg); } 使用油猴脚本为任意网页增加主题切换按钮要想上述的效果能快速应用到任意网站,我们必须要借助谷歌浏览器的一个插件———「油猴」!它允许用户在网页加载时注入自定义的 JavaScript 脚本,来「增强、修改或自动化网页行为」。 ?如果你对油猴不够了解,可以参考我的文章:juejin.cn/book/751468…[3] ?借助油猴,我们能很轻松实现一个主题切换脚本 // ==UserScript== // @name 一键暗黑换肤 // @namespace http://tampermonkey.net/ // @version 0.0.1 // @description 使用CSS滤镜快速切换网页为暗黑风格 // @author 石小石Orz // @match *://*/* // @grant GM_addStyle // @grant GM_addElement // ==/UserScript== (function () { 'use strict'; // 注入样式,初始时不开启 GM_addStyle(` html.dark-mode { filter: invert(0.9) hue-rotate(180deg); background: #111 !important; } html.dark-mode img, html.dark-mode video { filter: invert(1) hue-rotate(180deg); } // 添加切换按钮 const toggleBtn = GM_addElement(document.body,'button', { textContent: '主题切换', style: 'position:fixed;bottom:20px;right:20px;z-index:9999;padding:8px 12px;background:#444;color:white;border:none;border-radius:5px;cursor:pointer;', // 点击切换模式并更新按钮文字 toggleBtn.addEventListener('click', () = { const isDark = document.documentElement.classList.toggle('dark-mode'); })(); 上述脚本非常简单,通过GM_addStyle向网页注入了全局样式、通过GM_addElement创建一个全局按钮,实现点击切换主题。 ?如果你对系统的油猴脚本开发感兴趣,参考我的小册 -油猴脚本实战开发指南[4] ?然而,对象对我开发的脚本并不满意,她嫌我的按钮在网页右下角,挡住了她操作网页。没办法,又给他修改了一版,按钮支持拖拽移动,而且在其他页面能同步更新按钮位置 ?当然,自动同步更新位置的功能是借助油猴 API 实现的,原生 JS 很难实现这个效果。 ?这一版主题切换工具,对象终于满意了! 油猴脚本 YYDS! AI编程资讯AI Coding专区指南:https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文

上一篇:2024-05-06_特斯拉Optimus人形机器人进厂打工,娴熟分装电池、自我矫正,还能走更远了 下一篇:2025-04-01_一脑多机!智源的新发布,让不同机器人轻松协作

TAG标签:

16
网站开发网络凭借多年的网站建设经验,坚持以“帮助中小企业实现网络营销化”为宗旨,累计为4000多家客户提供品质建站服务,得到了客户的一致好评。如果您有网站建设网站改版域名注册主机空间手机网站建设网站备案等方面的需求...
请立即点击咨询我们或拨打咨询热线:13245491521 13245491521 ,我们会详细为你一一解答你心中的疑难。
项目经理在线

相关阅读 更多>>

猜您喜欢更多>>

我们已经准备好了,你呢?
2022我们与您携手共赢,为您的企业营销保驾护航!

不达标就退款

高性价比建站

免费网站代备案

1对1原创设计服务

7×24小时售后支持

 

全国免费咨询:

13245491521

业务咨询:13245491521 / 13245491521

节假值班:13245491521()

联系地址:

Copyright © 2019-2025      ICP备案:沪ICP备19027192号-6 法律顾问:律师XXX支持

在线
客服

技术在线服务时间:9:00-20:00

在网站开发,您对接的直接是技术员,而非客服传话!

电话
咨询

13245491521
7*24小时客服热线

13245491521
项目经理手机

微信
咨询

加微信获取报价