使用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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 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
smarty内置函数config_load用法实例
2015/01/22 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
json的使用小结
2016/06/08 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
django-filter和普通查询的例子
2019/08/12 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
Java面试题汇总
2015/12/06 面试题
校园门卫岗位职责
2013/12/09 职场文书
保安岗位职责
2014/02/21 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
小学优秀学生评语
2014/12/29 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
《藏戏》教学反思
2016/02/23 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技