任务1：单击按钮改变按钮颜色
任务描述：
实现单击按钮后改变按钮颜色的功能。页面中 有一排按钮，单击其中一个按钮时，当前被单击按钮的颜色发生变化，其他按钮颜色不变。如果又单击了其他按钮，则被单击按钮的颜色发生变化，之前发生变化的按钮恢复成默认颜色。
效果如下图所示：
任务分析：
首先为页面中所有按钮元素注册单击事件，然后再事件处理函数中对按钮进行遍历，判断每个按钮是否为当前出发事件的按钮，如果是则改变按钮颜色，如果不是则恢复成默认颜色。
任务实现：
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//获取所有按钮元素
var btns = document.getElementsByTagName("button");
//为所有按钮元素注册相同事件处理函数
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = changeColor;
}
function changeColor() {
for (var j = 0; j < btns.length; j++) {
if (btns[j] === this) {
//设置当前按钮的背景颜色
this.style.backgroundColor = "pink";
} else {
//去掉其他按钮的背景颜色
btns[j].style.backgroundColor = "";
}
}
}
</script>
</body>
任务2：单击按钮改变图形形状
任务描述：
在页面中定义1个div元素和2个按钮元素，实现单击第1个按钮使div元素变成圆形，单击第2个元素变回方形。
效果如下图所示：
任务分析：
（1）分别定义1个div元素和2个按钮元素，并设置CSS样式。
（2）设置div元素编程圆形的样式。
（3）JavaScript中通过类名获取div元素和按钮元素，并为按钮注册单击事件，修改div元素的类名。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: cadetblue;
margin-bottom: 10px;
}
button {
margin-left: 10px;
}
.change-border {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="change"></div>
<button class="btn">变成圆形</button>
<button class="btn">变回方形</button>
<script>
var box = document.getElementsByClassName("change");
var btns = document.getElementsByClassName("btn");
btns[0].onclick = function () {
box[0].classList.add("change-border");
};
btns[1].onclick = function () {
box[0].classList.remove("change-border");
};
</script>
</body>
</html>
任务3：实现广告图片的轮换效果
任务描述：
应用Document对象的getElementsByClassName()方法和setInterval()方法实现广告图片的轮换效果。
任务分析：
（1）在页面定义一个<div>元素，在元素中定义两张图片，然后为图片添加超链接，并设置超链接标签<a>的class属性值为i。
（2）在页面中编写JavaScript代码，应用Document对象的getElementsByClassName()方法获取class属性值为i的元素，然后编写自定义函数changeimage()，最后应用setInterval()方法，每隔3s执行一次changeimage()函数。
任务实现：
<body>
<div id="tabs">
<a class="i" href="#"><img src="images/1.jpg" alt=""></a>
<a class="i" href="#"><img src="images/2.jpg" alt=""></a>
</div>
<script>
var imgs = document.getElementsByClassName("i");
var index = 0;
function changeImage() {
imgs[index].style.display = "none";
index++;
if (index == imgs.length) {
index = 0;
}
imgs[index].style.display = "block";
}
setInterval("changeImage()", 3000);
</script>
</body>
素材下载：
原创视频
