HTML + JavaScript 实现简单的电灯开关

步骤分析

复制 分析：
    1.获取图片对象
    2.绑定单击事件
    3.每次点击切换图片
        * 规则：
            * 如果灯是开的 on,切换图片为 off
            * 如果灯是关的 off,切换图片为 on
        * 使用标记flag来完成

图片如下：

off.gif

on.gif

步骤实现

第一步：定义img标签，指定电灯图片

复制 <img id="light" src="./img/on.gif">

第二步：定义一个方法，鼠标点击，换电灯图片

复制 <script>
    function fun(flag) {
        // 1.获取图片对象
        var light = document.getElementById("light");
        // 2.绑定单击事件
        light.onclick = function() {
            if(flag) { // 判断如果灯是开的，则灭掉
                light.src = "img/off.gif";
                flag = false;
            } else {
                // 如果灯是灭的，则打开
                light.src = "img/on.gif";
                flag = true;
            }
        }
    }
</script>

第三步：使用该方法

复制 <script>
    fun(true);
</script>

所有步骤代码如下

复制 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
    <script>
        function fun(flag) {
            // 1.获取图片对象
            var light = document.getElementById("light");
            // 2.绑定单击事件
            light.onclick = function() {
                if(flag) { // 判断如果灯是开的，则灭掉
                    light.src = "img/off.gif";
                    flag = false;
                } else {
                    // 如果灯是灭的，则打开
                    light.src = "img/on.gif";
                    flag = true;
                }
            }
        }
    </script>
</head>
<body>
 
<img id="light" src="./img/on.gif">
 
<script>
    fun(true);
</script>
 
</body>
</html>

posted @ 2020-02-29 17:38 LeeHua 阅读(4477) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）

Lee Hua's Blog

热爱编程 -- 写Bug

HTML + JavaScript 实现简单的电灯开关

公告

我的标签

积分与排名

随笔分类 (240)

随笔档案 (226)

阅读排行榜

推荐排行榜

	分析：
	1.获取图片对象
	2.绑定单击事件
	3.每次点击切换图片
	* 规则：
	* 如果灯是开的 on,切换图片为 off
	* 如果灯是关的 off,切换图片为 on
	* 使用标记flag来完成

	<script>
	function fun(flag) {
	// 1.获取图片对象
	var light = document.getElementById("light");
	// 2.绑定单击事件
	light.onclick = function() {
	if(flag) { // 判断如果灯是开的，则灭掉
	light.src = "img/off.gif";
	flag = false;
	} else {
	// 如果灯是灭的，则打开
	light.src = "img/on.gif";
	flag = true;
	}
	}
	}
	</script>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>电灯开关</title>
	<script>
	function fun(flag) {
	// 1.获取图片对象
	var light = document.getElementById("light");
	// 2.绑定单击事件
	light.onclick = function() {
	if(flag) { // 判断如果灯是开的，则灭掉
	light.src = "img/off.gif";
	flag = false;
	} else {
	// 如果灯是灭的，则打开
	light.src = "img/on.gif";
	flag = true;
	}
	}
	}
	</script>
	</head>
	<body>

	<img id="light" src="./img/on.gif">

	<script>
	fun(true);
	</script>

	</body>
	</html>