设置网站夜间模式

老猫-Leo

发布于 2023-12-11 19:44:47

970

发布于 2023-12-11 19:44:47

超简单的给网站添加夜间模式

let brightness = 0;//显示遮罩
let div;
function cover(brightness) {
  if (typeof (div) === '?developer/article/2369470/undefined') {
    div = document.createElement('div');
    div.setAttribute('style', 'position:fixed;top:0;left:0;outline:50000px 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);

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-11-06，如有侵权请联系 cloudcommunity@tencent.com 删除

网站