JavaScript案例开关灯

最新推荐文章于 2023-10-15 23:00:40 发布

爱人io

最新推荐文章于 2023-10-15 23:00:40 发布

阅读量1.7k

点赞数 3

分类专栏： Java笔记文章标签： js javascript vue java css

本文链接：https://blog.csdn.net/qq_43083688/article/details/106037797

版权

Java笔记专栏收录该内容

40 篇文章 1 订阅

订阅专栏

案例1：电灯开关


	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>电灯开关</title>
	
	</head>
	<body>
	
	<img id="light" src="img/off.gif">
	
	<script>
	    /*
	        分析：
	            1.获取图片对象
	            2.绑定单击事件
	            3.每次点击切换图片
	                * 规则：
	                    * 如果灯是开的 on,切换图片为 off
	                    * 如果灯是关的 off,切换图片为 on
	                * 使用标记flag来完成
	
	     */
	
	    //1.获取图片对象
	    var light = document.getElementById("light");
	
	    var flag = false;//代表灯是灭的。 off图片
	
	    //2.绑定单击事件
	    light.onclick = function(){
	        if(flag){//判断如果灯是开的，则灭掉
	            light.src = "img/off.gif";
	            flag = false;
	
	        }else{
	            //如果灯是灭的，则打开
	
	            light.src = "img/on.gif";
	            flag = true;
	        }
	            }
	    
	</script>
	</body>
	</html>

爱人io

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
JavaScript案例开关灯

案例1：电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> <img id="light" src="img/off.gif"> <script> /* 分析：
复制链接

扫一扫

专栏目录