JavaScript实现网页关灯效果

案例池子：
JS实现鼠标悬停变色

JavaScript中的排他算法实现按钮单选
JavaScript中的localStorage

JavaScript中的sessionStorage

JavaScript实现网页关灯效果
JavaScript实现一段时间之后关闭广告

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>

JavaScript实现网页关灯效果相关推荐

【JavaScript】网页放大镜效果案例
[JavaScript]网页放大镜效果案例加深对e.pageX,e.pageY,offsetLeft,offsetTop,offsetWidth,offsetHeight的理解和应用鼠标事件mou ...
HTML+JavaScript实现网页秒杀倒计时效果
HTML+JavaScript实现网页秒杀倒计时效果 <!DOCTYPE html> <html><head><meta charset="utf- ...
php网页右下方广告窗口,javascript实现右下角广告框效果
本文教大家用原生js实现的简单网页主页右下角的广告框效果,利用好绝对定位,点击X关闭广告,里面的内容不管动图或者视频都可以. 代码最简洁,js行为优化版,复制粘贴即可使用. 演示部分右下角广告框效果 ...
html多级侧边菜单,JavaScript实现向右伸出的多级网页菜单效果
本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果.分享给大家供大家参考.具体如下: 这里使用JavaScript实现向右伸出的多级网页菜单效果,鼠标放在左侧的主菜单上,右侧就伸展出二级 ...
HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
网页loading效果可以通过js控制旋转速度
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
通过javascript在网页端生成zip压缩包并下载
通过javascript在网页端生成zip压缩包并下载原文:通过javascript在网页端生成zip压缩包并下载 zip.js是什么 zip.js的github项目地址:http://gildas ...
用Javascript实现回到顶部效果
用Javascript实现回到顶部效果经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载...
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...

JavaScript实现网页关灯效果

JavaScript实现网页关灯效果

效果演示

概述

HTML部分

CSS渲染

JS部分

完整代码

JavaScript实现网页关灯效果相关推荐

最新文章

热门文章