取模在实际案例当中的运用：
隔行换色：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
var i = 0;
i++;
if( i === 5 ){
i = 0;
}
i%=5;
*/
window.onload = function (){
var aLi = document.getElementsByTagName(‘li‘);
var arr = [ ‘red‘, ‘yellow‘, ‘blue‘ ];
for( var i=0; i<aLi.length; i++ ){
aLi[i].index = i;
aLi[i].style.background = arr[i%arr.length]; // 这里如果仅仅只是aLi[i].style.background = arr[i]，那么只能实现3行li的底色for循环就结束了,取模后就可以循环得到 0,1,2,这样的结果，然后不断给li添加样式。
aLi[i].onmouseover = function (){
this.style.background = ‘gray‘;
};
aLi[i].onmouseout = function (){
this.style.background = arr[this.index%arr.length];
};
}
};
</script>
<style>
li { height:24px; margin-bottom:3px; list-style:none; }
</style>
</head>
<body>
<ul id="ul1">
<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>
取反运算符在实际案例中的运用：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aInp = document.getElementsByTagName(‘input‘);
// aInp[1].checked = false;
// aInp[2].checked = true;
aInp[0].onclick = function (){
for( var i=1; i<aInp.length; i++ ){
aInp[i].checked = !aInp[i].checked; //
/*
if( aInp[i].checked ) {
aInp[i].checked = false;
} else {
aInp[i].checked = true;
}
*/
}
};
};
</script>
</head>
<body>
<input type="button" value="反选" />
<ul>
<li><input type="checkbox" checked /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" checked /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
</ul>
</body>
</html>
时间： 2024-08-05 11:39:48