您的位置：首页 > Web前端 > JavaScript

运算符1—JS学习笔记2015-6-13（第56天）

2015-06-13 23:18 756 查看

取模在实际案例当中的运用：

隔行换色：

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航