javascript夜间模式
代码:
function sunMoon() { var styleElem = null, doc = document, ie = doc.all, fontColor = 50, sel = 'body,body *'; var styleElem = createCSS(sel, setStyle(fontColor), styleElem); showTip(doc); if (ie) { doc.attachEvent('onkeydown', onKeyDown); } else { doc.addEventListener('keydown', onKeyDown); }; function onKeyDown(evt) { if (! (evt.keyCode === 87 || evt.keyCode === 81)) return; var evt = ie ? window.event: evt; if (evt.keyCode === 87) { fontColor = (fontColor >= 100) ? 100 : fontColor + 10 } else if (evt.keyCode === 81) { fontColor = (fontColor <= 10) ? 10 : fontColor - 10 }; styleElem = createCSS(sel, setStyle(fontColor), styleElem); }; function setStyle(fontColor) { var colorArr = [fontColor, fontColor, fontColor]; return 'background-color:#000 !important;color:RGB(' + colorArr.join('%,') + '%) !important;' }; function createCSS(sel, decl, styleElem) { var doc = document, h = doc.getElementsByTagName('head')[0], styleElem = styleElem; if (!styleElem) { s = doc.createElement('style'); s.setAttribute('type', 'text/css'); styleElem = ie ? doc.styleSheets[doc.styleSheets.length - 1] : h.appendChild(s); }; if (ie) { styleElem.addRule(sel, decl); } else { styleElem.innerHTML = ''; styleElem.appendChild(doc.createTextNode(sel + ' {' + decl + '}')); }; return styleElem; }; function showTip() { var tipElem = doc.createElement('div'), body = doc.getElementsByTagName('body')[0]; tipElem.innerHTML = '===夜间模式开启,q&w可增减字体亮度==='; tipElem.style.cssText = 'background-color:#3FA9FB !important;color:#fff !important;font-size:14px;height:20px;line-height:20px;position:fixed;left:0;top:0;text-align:center;width:100%;z-index:99999;'; body.appendChild(tipElem); setTimeout(function() { body.removeChild(tipElem); }, 3000); } }
函数会在页面增加如下内容:
<style type="text/css"> body,body * {background-color:#000 !important;color:RGB(50%,50%,50%) !important;} </style>
功能:
支持chrome,firefox,ie
q键:减少字体亮度
w键:增加字体亮度
要恢复刷新页面即可
使用1:
<a href="javascript:(sunMoon)();">夜间模式</a>
使用2:
在浏览器标签栏上添加标签,内容为:'javascript:(sunMoon)();',将括号中内容替换为上面的函数即可。
相关推荐
本CSS样式为扇贝网的夜间模式,为了方便夜间使用而编写的
如何给Web页面增加夜间模式功能? 其实所谓的夜间模式就是在页面上增加一个透明的遮罩层,但是遮罩层会挡住页面元素, 解决方法是 添加DIV,给DIV的outline属性一个很大的outline-width值,用outline的边框作为遮罩,...
主要介绍了基于JavaScript或jQuery实现网站夜间/高亮模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Darkmode.js
夜间模式助手:computer_disk: 安装地址:wrench: 插件功能使用油猴脚本实现夜间模式,保护眼睛。:artist_palette: 脚本效果
零依赖性Javascript库,用于在UI中启用暗/夜模式。 用法 包括Nightly.js 通过[removed]标签 <!-- Download this repository then use "dist/nightly.min.js" --> < script src =" nightly.min.js " > ...
在网页版基础上,进行界面的优化,并支持切换日/夜间模式。 不知从什么时候开始,我使用 Windows 有道云笔记同步笔记内容的时候,经常出现下面这种情况: 同步失败,换了别的电脑/重装软件也是不行,偶然间发现网页...
15个常用的方法:随机排列数组、 检查日期是否有效、复制到剪贴板、清除所有 Cookie、检测夜间模式……
Darken.js 可以添加到任何网站,只需包含一些 javascript。 <!--jQuery and are requirements for Darken.js to work --> < script src =" //code.jquery.com/jquery-1.11.0.min.js " > </ script...
请使用以下凭据Username : yogi15moto@gmail.com password : yogesh屏幕截图流动检视夜间模式首页月查看页面夜间模式日视图夜间模式统计夜间模式保存目标夜间模式设置夜间模式滤镜夜间模式主页日模式月查看日模式...
siddharthkp.github.io/notella功能简洁的设计渐进式Web应用程序在设备之间同步脱机支持添加到主屏幕夜间模式with用Firebase构建的喜欢它吗? :star:这r siddharthkp.github.io/notella功能干净的设计渐进式Web应用...
它提供了高度可定制化的选项,包括自定义主题色、页面布局、顶栏、侧栏、Banner、背景图、日夜间模式等。它支持日间、夜间和纯黑三种模式,并可以根据时间自动切换或跟随系统夜间模式。此外,Argon还提供了许多功能...
由于夜间模式实用性不大,并且如果在浏览过程中突然转变为夜间模式会影响阅读体验,因此删除了夜间模式(不是关闭,是删除),如需夜间模式请前往原主题。 背景 修改后的背景: background by 蓝色 粉色 代码高亮 支持...
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。目录自动格式化代码更改页面<title>... 使用AJAX请求获取数据与API后端集成节点Ruby on Rails 在开发中...
夜间模式:切换夜间模式 效果:在文本中添加效果 响应度:添加和提高响应度 联系人:完成联系人 本地存储:添加本地Web存储该项目正在开发中。 :rocket: 技术领域 该项目是使用以下技术开发的: VS代码; HTML; ...
计算器 计算器项目(Odin项目课程)
它具有夜间模式功能。 它就像您的移动计算器一样工作。 单击相等按钮后,如果您按“DEL”按钮,它也会在计算中发生变化,例如还剩多少数字,它将继续计算,直到您删除所有内容。 语言-:我制作了一个简单的基本...