黑马程序员技术交流社区

标题: 学习经历阿迪王 [打印本页]

作者: 810296276 时间: 2019-6-1 15:03
标题: 学习经历阿迪王

<title>电风扇</title>
</head>
<body>
<img src="img/风扇off.png" id="img"/><br>
<input type="button" value="打开" id="btn1"/>    
<input type="button" value="风速一" id="btn2"/>    
<input type="button" value="风速二" id="btn3"/>    
<input type="button" value="风速三" id="btn4"/>    
<input type="button" value="关闭" id="btn5"/>

<script>
/*
      分析步骤：
         1.在页面上显示一个图片
         2.定义几个按钮
         3.给每个按钮添加单击事件
            实现切换不同图片的功能
   */
//1.获取打开按钮的对象
var btn1 = document.getElementById("btn1");
//2.给按钮添加单击事件
btn1.onclick = function(){
      //3.实现切换不同图片的功能
      var img = document.getElementById("img");
      img.src = "img/风扇速度1.gif";
}

//1.获取风速一按钮的对象
var btn2 = document.getElementById("btn2");
//2.给按钮添加单击事件
btn2.onclick = function(){
      //3.实现切换不同图片的功能
      var img = document.getElementById("img");
      img.src = "img/风扇速度1.gif";
}

//1.获取风速二按钮的对象
var btn3 = document.getElementById("btn3");
//2.给按钮添加单击事件
btn3.onclick = function(){
      //3.实现切换不同图片的功能
      var img = document.getElementById("img");
      img.src = "img/风扇速度2.gif";
}

//1.获取风速三按钮的对象
var btn4 = document.getElementById("btn4");
//2.给按钮添加单击事件
btn4.onclick = function(){
      //3.实现切换不同图片的功能
      var img = document.getElementById("img");
      img.src = "img/风扇速度3.gif";
}

//1.获取关闭按钮的对象
var btn5 = document.getElementById("btn5");
//2.给按钮添加单击事件
btn5.onclick = function(){
      //3.实现切换不同图片的功能
      var img = document.getElementById("img");
      img.src = "img/风扇off.png";
}

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

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