Home > Web Front-end > JS Tutorial > Use javascript to add night mode to web pages_javascript tips

Use javascript to add night mode to web pages_javascript tips

WBOY
Release: 2016-05-16 17:02:32
Original
3060 people have browsed it

HTML CSS:

Copy code The code is as follows:


Copy code The code is as follows:


Then use JavaScript to write a night mode plus:

Copy the code The code is as follows:

<script><br>var brightness;<br>//Display mask<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>//Event listening<br>window.addEventListener('keydown', function(e) {<br> if (e.altKey && e.keyCode == 90) { //Alt Z: Turn on night mode <br> cover(brightness = 0.3);<br> }<br> if (e.altKey && e.keyCode == 88) { //Alt X: Turn off <br> cover(brightness = 0 ; <br> }<br> if (e.altKey && e.keyCode == 40) { //Alt ↓:Reduce brightness<br> if (brightness 0.05 < 0.95) cover(brightness = 0.05);<BR> } <BR>}, false);<BR></script>



It can also be written as a GreaseMonkey script and used as a browser extension to add night mode to any page
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template