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

 更新时间:2014年01月26日 09:47:03   作者:   我要评论

如何给Web页面增加夜间模式功能? 其实所谓的夜间模式就是在页面上增加一个透明的遮罩层,但是遮罩层会挡住页面元素, 解决方法是 添加DIV,给DIV的outline属性一个很大的outline-width值,用outline的边框作为遮罩,这样既能正常点击页面元素,又能达到夜间模式的效果

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中字符串拼接详解

    javascript中字符串拼接详解

    字符串拼接是所有程序设计语言都需要的操作。当拼接结果较长时,如何保证效率就成为一个很重要的问题。本文介绍的是Javascript中的字符串拼接,希望对你有帮助,一起来看。
    2014-09-09
  • js中将String转换为number以便比较

    js中将String转换为number以便比较

    string没转换就拿去比较,结果是很头疼的,下面为大家介绍下js中String转换为number,需要的朋友可以参考下
    2014-07-07
  • JS实现向表格行添加新单元格的方法

    JS实现向表格行添加新单元格的方法

    这篇文章主要介绍了JS实现向表格行添加新单元格的方法,涉及javascript针对表格进行动态操作的技巧,需要的朋友可以参考下
    2015-03-03
  • 详解Javascript中prototype属性(推荐)

    详解Javascript中prototype属性(推荐)

    这篇文章主要介绍了Javascript中prototype属性的相关资料,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • js图片上传的封装代码

    js图片上传的封装代码

    这篇文章主要为大家详细介绍了js图片上传的封装代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js实现符合国情的日期插件详解

    js实现符合国情的日期插件详解

    本篇文章主要介绍了js实现符合国情的日期插件的方法与步骤。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 仅在IE6/7/8下cssText返回值少了分号的测试代码

    仅在IE6/7/8下cssText返回值少了分号的测试代码

    在IE6/7/8中少了分号。使用cssText属性时需注意。
    2011-03-03
  • 图解JavaScript中的this关键字

    图解JavaScript中的this关键字

    这篇文章利用图片讲解的方式向大家解释了JavaScript中的this关键字,JavaScript this 到底指向什么?从这篇文章中大家可以得到想要的答案,需要的朋友可以参考下
    2015-10-10
  • JS实现访问DOM对象指定节点的方法示例

    JS实现访问DOM对象指定节点的方法示例

    这篇文章主要介绍了JS实现访问DOM对象指定节点的方法,结合实例形式分析了javascript针对DOM元素节点属性相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • Javascript 实用小技巧

    Javascript 实用小技巧

    都是一些非常不错的js 小技巧,学习js的朋友一定要看下,有很多不错的代码。
    2010-04-04

最新评论