取模在实际案例当中的运用：
隔行换色：
<!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>