隔行变色
今天我们来做一个好玩的东西：隔行变色。先来看一下效果图。
隔行变色
接下来我们看一下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<script>
window.onload = function() {
var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) {
//i 0 1 2 3 4 5...
if(i % 2 == 0) {
//2 4 6 8 ...
aLi[i].style.background = '#F9F8DB';
} else {
//1 3 5 7 9 ...
aLi[i].style.background = '#CFCBBC';
}
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
分析代码很简单，获取所有的li元素，然后做判断，如果i%2等于0，那么这些数为一个颜色，其他为另一个颜色，就达到了我们想要的效果。
好了，今天的分享就到这里了。
愿你三冬暖,愿你春不寒; 愿你天黑有灯,下雨有伞。
小晴天.jpg
网友评论