使用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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python 闭包的使用方法
2017/09/07 Python
python求质数的3种方法
2018/09/28 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
前台文员岗位职责及工作流程
2013/11/19 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
推荐信模板
2014/05/09 职场文书
运动会入场口号
2014/06/07 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫