开关灯案例

女爷i 2023-02-17 08:56 51阅读 0赞

### 效果图： ###

![在这里插入图片描述][20200613113612416.gif]

### 源代码 ###

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { 
    			background-color: white;
    		}
    		div { 
    			height: 200px;
    			width: 200px;
    
    			margin:100px auto;
    		}
    		button { 
    			width: 100%;
    			height: 100%;
    			background: url(image/black.png) no-repeat;
    			border: 0px;
    			outline: 0px;
    		}
    	</style>
    </head>
    
    <body>
    	<div>
    		<button>
    			
    		</button>
    	</div>
    	<script>
    		var body = document.querySelector('body');
    		var bt = document.querySelector('button');
    		var flag = 1; bt.onclick = function () { 
    			if(flag == 1){ 
    					this.style.background='url(image/white.png)';
    					body.style.background='black';
    					flag = 0;
    			}
    			else { 
    					this.style.background='url(image/black.png)';
    					body.style.background='white';
    					flag = 1;
    
    			}
    		
    		}
    	</script>
    </body>
    </html>

#### 素材： ####

白灯：  
可能因为CSDN的背景色看不出来  
![请添加图片描述][20200613113251543.png]  
黑灯：  
![请添加图片描述][20200613113251570.png]

[20200613113612416.gif]: https://img-blog.csdnimg.cn/20200613113612416.gif
[20200613113251543.png]: https://img-blog.csdnimg.cn/20200613113251543.png
[20200613113251570.png]: https://img-blog.csdnimg.cn/20200613113251570.png

发表评论取消回复

表情：

评论列表（有 0 条评论，51人围观）

还没有评论，来说两句吧...

相关阅读

相关开关灯（网页版）

开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

客官°小女子只卖身不卖艺/ 2023年10月03日 15:21/ 0 赞/ 16 阅读

相关 B2092 开关灯【入门】

原题链接: [开关灯][Link 1] 开关灯题目描述假设有 N N N 盏灯（ N N N 为不大于 5000 5000 5000 的正整数），从 1

浅浅的花香味﹌/ 2023年09月25日 17:19/ 0 赞/ 13 阅读

相关 js实现开关灯游戏

需求：点击三个按钮，页面出现不同数量的“灯” 所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。代码在这里~~~ [https

冷不防/ 2023年06月05日 08:10/ 0 赞/ 19 阅读

相关开关灯案例

效果图： ![在这里插入图片描述][20200613113612416.gif] 源代码 <!DOCTYPE html> <html lang="en">

女爷i/ 2023年02月17日 08:56/ 0 赞/ 52 阅读

相关 js 实现一个开灯关灯操作

<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>

男娘i/ 2023年01月16日 02:43/ 0 赞/ 172 阅读

相关 jquery开关灯案例_jQuery----操作类样式（依托开关灯案例）

在网页开发中，元素的样式可以在style标签中定义，但是有很多案例需要添加类样式或者删除类样式，可以获取元素调用css()方法改变元素样式，但是这种方法很繁杂，本文利用开关灯案

冷不防/ 2022年12月31日 15:23/ 0 赞/ 163 阅读

相关 gsap+svg开关灯切换按钮js特效

[下载地址][Link 1] gsap+svg开关灯切换按钮特效，很有创意JavaScript开关特效。 ![1632803095.png][] dd: [Link

r囧r小猫/ 2022年09月13日 14:21/ 0 赞/ 302 阅读

相关 JavaScript开关灯投影效果

[下载地址][Link 1]JavaScript实现的开关灯投影效果，CSS3左右摇摆动画特效。 ![1631561784.png][] dd: [Link 1]: h

痛定思痛。/ 2022年09月11日 09:18/ 0 赞/ 178 阅读

相关使用javascript实现开灯关灯案例

使用javascript实现开灯关灯案例 <!DOCTYPE html> <html lang="en"> <head> <met

一时失言乱红尘/ 2022年02月03日 15:07/ 0 赞/ 260 阅读

相关 jQuery实现开关灯效果案例

效果展示点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。开灯： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

﹏ヽ暗。殇╰゛Y/ 2021年06月22日 15:35/ 0 赞/ 558 阅读