JavaScript实现网页关灯效果
案例池子：
效果演示
概述
简介：本文讲解的是，如何使用JavaScript实现我们经常看见的网页的关灯效果。
HTML部分
<body> <div class=""></div> <button> 开关灯</button> </body>
CSS渲染
<style> /* 制作一个设置背景为黑色的类 */ .bg { background-color: black; } </style>
JS部分
<script> // classList 是一个类列表 存放的是一个标签拥有的类的个数 var div = document.querySelector('div'); var btn = document.querySelector('button'); btn.addEventListener('click', function() { // toggle意思为如果没有里面的那个参数 // 那么加入这个参数 // 反正去掉这个参数 // 这样可以简单的实现开关灯的效果 document.body.classList.toggle('bg'); }) </script>
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 制作一个设置背景为黑色的类 */ .bg { background-color: black; } </style> </head> <body> <div class=""></div> <button> 开关灯</button> <script> // classList 是一个类列表 存放的是一个标签拥有的类的个数 var div = document.querySelector('div'); var btn = document.querySelector('button'); btn.addEventListener('click', function() { // toggle意思为如果没有里面的那个参数 // 那么加入这个参数 // 反正去掉这个参数 // 这样可以简单的实现开关灯的效果 document.body.classList.toggle('bg'); }) </script> </body> </html>
如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下
