JS点击事件之电灯开关案例

最新推荐文章于 2022-06-27 13:41:07 发布

原创最新推荐文章于 2022-06-27 13:41:07 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

14 篇文章

订阅专栏

本文通过一个简单的电灯开关案例，深入浅出地讲解了JavaScript中的点击事件处理。通过添加事件监听器，实现点击按钮切换灯泡状态的效果，同时讨论了DOM操作和条件判断在实践中的应用。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>电灯开关</title>
		<script type="text/javascript">
			var flag = false;

			function run() {
				var l = document.getElementById("light")
				if(flag) {
					l.src = "img/off.gif"
					flag = false
				} else {
					l.src = "img/on.gif"
					flag = true
				}
			}
		</script>
	</head>

	<body>
		<img id="light" onclick="run()" src="img/off.gif" />
	</body>

</html>