使用javascript为网页增加夜间模式 |
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脚本,作为浏览器扩展给任意页面增加夜间模式 |