首页 web前端 js教程 使用javascript为网页增加夜间模式_javascript技巧

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

May 16, 2016 pm 05:02 PM
javascript 夜间模式 网页

HTML+CSS:

复制代码 代码如下:


复制代码 代码如下:


接着用JavaScript写个夜间模式plus:

复制代码 代码如下:

<script><BR>var brightness;<BR>//显示遮罩<BR>function cover(brightness) {<BR> if (typeof(div) == 'undefined') {<BR> div = document.createElement('div');<BR> div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');<BR> document.body.appendChild(div);<BR> } else {<BR> div.style.display = '';<BR> }<BR> div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';<BR>}<BR>//事件监听<BR>window.addEventListener('keydown', function(e) {<BR> if (e.altKey && e.keyCode == 90) { //Alt+Z:打开夜间模式<BR> cover(brightness = 0.3);<BR> }<BR> if (e.altKey && e.keyCode == 88) { //Alt+X:关闭<BR> cover(brightness = 0);<BR> }<BR> if (e.altKey && e.keyCode == 38) { //Alt+↑:增加亮度<BR> if (brightness - 0.05 > 0.05) cover(brightness -= 0.05);<BR> }<BR> if (e.altKey && e.keyCode == 40) { //Alt+↓:降低亮度<BR> if (brightness + 0.05 < 0.95) cover(brightness += 0.05);<BR> }<BR>}, false);<BR></script>

还可以写成GreaseMonkey脚本,作为浏览器扩展给任意页面增加夜间模式

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1266
29
C# 教程
1239
24
Edge浏览器怎么将网页用快捷方式发送到桌面? Edge浏览器怎么将网页用快捷方式发送到桌面? Mar 14, 2024 pm 05:22 PM

  Edge浏览器怎么将网页用快捷方式发送到桌面?我们很多用户为了方便直接打开访问页面,想要将经常使用的网页以快捷方式的形式显示在桌面,但是不知道应该如何操作,针对这个问题,本期小编就来和广大用户们分享解决方法,一起来看看今日软件教程分享的内容吧。  Edge浏览器将网页发送到桌面快捷方式方法:  1、打开软件,点击页面中的“...”按钮。  2、在下拉菜单选项中选择“应用”中的“将此站点作为应用安装”。  3、最后在弹出的窗口中将其

网页图片加载不出来怎么办?6种解决办法 网页图片加载不出来怎么办?6种解决办法 Mar 15, 2024 am 10:30 AM

  有网友发现打开浏览器网页,网页上的图片迟迟加载不出来,是怎么回事?检查过网络是正常的,那是哪里出现了问题呢?下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。  网页图片加载不出来:  1、网速问题  网页显示不出图片有可能是因为电脑的网速比较慢,电脑中开启的软件比较多,  而我们访问的图片比较大,这就可能因为加载超时,导致图片显示不出来,  可以将比较占网速的软件将关掉,可以去任务管理器查看一下。  2、访问人数过多  网页显示不出图片还有可能是因为我们访问的网页,在同时间段访问的

网络连接正常但浏览器无法访问网页可能原因 网络连接正常但浏览器无法访问网页可能原因 Feb 19, 2024 pm 03:45 PM

浏览器打不开网页但是网络正常,可能的原因是多种多样的。在该问题出现时,我们需要逐步排查,才能确定具体的原因并解决问题。首先,确定网页打不开的现象是局限于某个特定的浏览器还是所有浏览器都无法打开网页。如果只有一个浏览器无法打开网页,可以尝试使用其他浏览器,如谷歌浏览器、火狐浏览器等进行测试。如果其他浏览器能够正常打开网页,那么问题很可能出在该特定浏览器上,可能

解决百度贴吧安卓版字体太小问题,如何开启夜间模式 解决百度贴吧安卓版字体太小问题,如何开启夜间模式 Dec 27, 2023 pm 08:45 PM

百度贴吧是一个非常受欢迎的互动平台,许多人都会使用它来与志同道合的人交流经验。如今,我们使用手机的频率非常高,百度贴吧安卓版已成为许多人手机中必备的应用之一。然而,最近很多用户反映百度贴吧安卓版的字体太小,那么我们应该如何解决这个问题呢?另外,在晚上使用安卓版百度贴吧时,如何设置夜间模式以保护视力呢?怎么解决安卓版百度贴吧字体过小的问题?使用百度贴吧浏览帖子时,如果觉得字体太小,可以点击右上角的三个点,找到调整文字大小的选项,根据个人需求进行调整如何设置安卓版百度贴吧的夜间模式?在菜单界面中,仍

php怎么在网页打开 php怎么在网页打开 Mar 22, 2024 pm 03:20 PM

在网页中执行 PHP 代码需要确保 Web 服务器支持并已正确配置 PHP。可以通过三种方式打开 PHP: * **服务器环境:**将 PHP 文件放置在服务器根目录并通过浏览器访问。 * **集成开发环境:**将 PHP 文件放置在指定 Web 根目录并通过浏览器访问。 * **远程服务器:**通过服务器提供的 URL 地址访问托管在远程服务器上的 PHP 文件。

网页打不开怎么解决 网页打不开怎么解决 Feb 21, 2024 am 10:24 AM

网页打不开怎么解决随着互联网的快速发展,人们越来越依赖于互联网来获取信息、进行交流和娱乐。然而,有时我们会遇到网页打不开的问题,这给我们带来了很多困扰。本文将为大家介绍一些常见的方法,帮助解决网页打不开的问题。首先,我们需要确定是由于什么原因导致网页打不开。可能的原因包括网络问题、服务器问题、浏览器设置问题等。下面是一些解决方法:检查网络连接:首先,我们需要

百词斩怎么设置夜间模式 百词斩设置夜间模式的方法 百词斩怎么设置夜间模式 百词斩设置夜间模式的方法 Mar 12, 2024 pm 02:04 PM

  百词斩怎么设置夜间模式?百词斩是一款非常受欢迎的学习英语神器。软件为用户们提供了海量的学习题材以及有趣的学习方式,用户可以根据自己的实际情况选择适合自己的学习方式,有效提高英语水平。我们在夜晚使用这款软件的时候,如果觉得屏幕太亮还可以设置成夜间模式进行调节。具体怎么设置呢?感兴趣的小伙伴一起来看看小编带来的方法讲解吧。  百词斩设置夜间模式的方法  1。打开百词斩,进入侧边栏,找到设置,点击进入。安卓和iOS系统的都是一样的位置。在设置中找到“包大人模式”,因为百词斩的包大人设计得很有趣,所

如何知道照片是否在iPhone上的夜间模式下被点击 如何知道照片是否在iPhone上的夜间模式下被点击 Feb 29, 2024 pm 04:31 PM

苹果在iOS平台上的原生相机应用程序配备了夜间模式,用户可以调整图像的ISO、光圈和快门速度,从而即使在光线较暗的环境中也能拍摄出明亮清晰的照片。这种功能使得拍摄出来的图片质量非常高,以至于其他人可能难以分辨照片是在夜间模式下拍摄的。那么,如何找到在夜间模式下点击了哪张照片呢?这就是我们将在这篇文章中解释的内容。iOS相机中的夜间模式是什么?为了捕捉光线较暗的物体,摄影师可以巧妙地运用相机的设置。通过调整光圈、ISO值和快门速度,可以延长传感器的曝光时间,让相机更多地接收光线。增大光圈可以让更多

See all articles