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>
本文来自博客园,作者:LeeHua,转载请注明原文链接:https://www.cnblogs.com/liyihua/p/12384271.html