<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";
}
|
|
收藏
淘帖
踩
