快捷導(dǎo)航

使用javascript為網(wǎng)頁(yè)增加夜間模式

更新時(shí)間：2014年01月26日 09:47:03 作者：

如何給Web頁(yè)面增加夜間模式功能? 其實(shí)所謂的夜間模式就是在頁(yè)面上增加一個(gè)透明的遮罩層，但是遮罩層會(huì)擋住頁(yè)面元素，解決方法是添加DIV，給DIV的outline屬性一個(gè)很大的outline-width值，用outline的邊框作為遮罩，這樣既能正常點(diǎn)擊頁(yè)面元素，又能達(dá)到夜間模式的效果

HTML+CSS:

復(fù)制代碼代碼如下:

復(fù)制代碼代碼如下:

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

接著用JavaScript寫個(gè)夜間模式plus:

復(fù)制代碼代碼如下:

<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 + ')';
}
//事件監(jiān)聽
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:關(guān)閉
        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腳本，作為瀏覽器擴(kuò)展給任意頁(yè)面增加夜間模式

您可能感興趣的文章:

相關(guān)文章

JavaScript中return用法示例
這篇文章主要介紹了JavaScript中return用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了javascript中return語(yǔ)句的功能與使用技巧,需要的朋友可以參考下
2016-11-11
Javascript 訪問(wèn)樣式表實(shí)現(xiàn)代碼
Javascript訪問(wèn)樣式表--又一篇好文章
2009-08-08
微信小程序出現(xiàn)wx.getLocation再次授權(quán)問(wèn)題的解決方法分析
這篇文章主要介紹了微信小程序出現(xiàn)wx.getLocation再次授權(quán)問(wèn)題的解決方法,結(jié)合實(shí)例形式分析了解決wx.getLocation再次授權(quán)問(wèn)題的相關(guān)操作步驟,需要的朋友可以參考下
2019-01-01
防止頁(yè)面被iframe(兼容IE,Firefox火狐)
以前發(fā)布的防止被iframe的代碼，容易在火狐瀏覽器下，不斷的刷新頁(yè)面。所以從網(wǎng)站找到了這篇文章。
2010-07-07
javascript的鍵盤控制事件說(shuō)明
獲取鍵盤控制事件是實(shí)現(xiàn)交互性最有力的方法之一。
2008-04-04
JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條
對(duì)于有很多流程的東西，我們希望能夠根據(jù)不同的階段，用流程條對(duì)應(yīng)地進(jìn)行顯示，非常直觀，給用戶帶來(lái)極好的用戶體驗(yàn)，下面小編給大家分享JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條功能，需要的的朋友參考下
2017-03-03
js實(shí)現(xiàn)創(chuàng)建刪除html元素小結(jié)
本文給大家簡(jiǎn)單介紹了下使用javascript和jquery實(shí)現(xiàn)創(chuàng)建刪除html元素的方法，非常的實(shí)用，有需要的小伙伴可以參考下。
2015-09-09
javascript中如何將字符串轉(zhuǎn)換成數(shù)字
這篇文章主要介紹了javascript中如何將字符串轉(zhuǎn)換成數(shù)字問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
JavaScript中正則表達(dá)式判斷匹配規(guī)則及常用方法
JS作為一門常用于web開發(fā)的語(yǔ)言，必然要具備正則這種強(qiáng)大的特性，本文將對(duì)JS中的正則用法及常用函數(shù)進(jìn)行一番總結(jié)
2017-08-08
antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12