图片是一盏灯,点击一下灯开了,再点击一下灯灭了,就是灯亮和灯灭可以来回切换,下面这个是正确的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="light" src="image/off.jpg">
<script>
//获取图片对象
var light =document.getElementById("light");
//代表灯是灭的
var flag = false;
//绑定单击事件
light.onclick = function(){
if(flag){
light.src = "image/off.jpg";
flag = false;
}else{
light.src = "image/on.jpg";
flag = true;
}
}
</script>
</body>
</html>
但是如果我将绑定单击事件中的代码更换为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="light" src="image/off.jpg">
<script>
//获取图片对象
var light =document.getElementById("light");
//代表灯是灭的
var flag = false;
//绑定单击事件
light.onclick = function(){
if(flag == false){
light.src = "image/on.jpg";
flag = true;
}else{
light.src = "image/off.jpg";
flag = false;
}
}
</script>
</body>
</html>
图片就不能来回切换了,主要是看不懂if语句的逻辑,为什么正确的代码中flag在里面不用写判断语句,而是直接写了个“flag”就可以了