黑马程序员技术交流社区

标题: 【成都校区】灯泡开关 [打印本页]

作者: zp675745087 时间: 2018-12-13 21:02
标题: 【成都校区】灯泡开关
<!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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2