使用javascript为网页增加夜间模式


Posted in Javascript onJanuary 26, 2014

HTML+CSS:

<div class="cover"></div>
<style>
.cover{
    position:fixed;
    top: 0px;
    left: 0px;
    outline:5000px solid rgba(0, 0, 0, 0.3);
    z-index: 99999;
}
</style>

接着用JavaScript写个夜间模式plus:

<script>
var brightness;
//显示遮罩
function cover(brightness) {
    if (typeof(div) == 'undefined') {
        div = document.createElement('div');
        div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');
        document.body.appendChild(div);
    } else {
        div.style.display = '';
    }
    div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
}
//事件监听
window.addEventListener('keydown', function(e) {
    if (e.altKey && e.keyCode == 90) { //Alt+Z:打开夜间模式
        cover(brightness = 0.3);
    }
    if (e.altKey && e.keyCode == 88) { //Alt+X:关闭
        cover(brightness = 0);
    }
    if (e.altKey && e.keyCode == 38) { //Alt+↑:增加亮度
        if (brightness - 0.05 > 0.05) cover(brightness -= 0.05);
    }
    if (e.altKey && e.keyCode == 40) { //Alt+↓:降低亮度
        if (brightness + 0.05 < 0.95) cover(brightness += 0.05);
    }
}, false);
</script>

还可以写成GreaseMonkey脚本,作为浏览器扩展给任意页面增加夜间模式

Javascript 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
Vue详细的入门笔记
May 10 Vue.js
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 #Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 #Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 #Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 #Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 #Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 #Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 #Javascript
You might like
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Pycharm小白级简单使用教程
2020/01/08 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
DELPHI面试题研发笔试试卷
2015/11/08 面试题
模具专业毕业生自荐书范文
2014/02/19 职场文书
平安工地汇报材料
2014/08/19 职场文书
房屋所有权证明
2014/10/20 职场文书
团员个人总结
2015/02/26 职场文书
投诉书格式范本
2015/07/02 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Python中re模块的元字符使用小结
2022/04/07 Python