js作用域實現騰訊首頁隔行換色效果
一、騰訊首頁隔行換色效果
此效果通過函數內的變量，作用域，for循環，索引值，this，空變量儲存等知識實 現了隔行換色的效果，及鼠標移動到指定位置顏色改變，移開時顏色變爲原來的顏 色的效果。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>騰訊首頁隔行換色</title>
<style>
h1{ height:30px; width:300px; font-size:25px; line-height:30px; text-align:center; border:2px solid pink; margin:40px auto;}
li{ height:30px; margin-bottom:5px; list-style:none;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
var arr = ['yellow','red','pink'];
var str = ''; //定義一個變量值進行存儲
for(var i=0;i<aLi.length;i++){
aLi[i].index = i; //利用索引值進行實現
aLi[i].style.background = arr[i%arr.length];
aLi[i].onmouseover = function(){
str = this.style.background;
this.style.background = 'gray';
}
aLi[i].onmouseout = function(){
for(var i=0;i<aLi.length;i++){
aLi[i].style.background = arr[i%3];
}
}
aLi[i].onmouseout = function(){
this.style.background = arr[this.index%arr.length];
}
aLi[i].onmouseout = function(){
this.style.background = str;
}
}
}
</script>
</head>
<body>
<h1>js的%運算</h1>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>騰訊首頁隔行換色</title>
<style>
h1{ height:30px; width:300px; font-size:25px; line-height:30px; text-align:center; border:2px solid pink; margin:40px auto;}
li{ height:30px; margin-bottom:5px; list-style:none;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
var arr = ['yellow','red','pink'];
var str = ''; //定義一個變量值進行存儲
for(var i=0;i<aLi.length;i++){
aLi[i].index = i; //利用索引值進行實現
aLi[i].style.background = arr[i%arr.length];
aLi[i].onmouseover = function(){
str = this.style.background;
this.style.background = 'gray';
}
aLi[i].onmouseout = function(){
for(var i=0;i<aLi.length;i++){
aLi[i].style.background = arr[i%3];
}
}
aLi[i].onmouseout = function(){
this.style.background = arr[this.index%arr.length];
}
aLi[i].onmouseout = function(){
this.style.background = str;
}
}
}
</script>
</head>
<body>
<h1>js的%運算</h1>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
注意：此代碼中當鼠標移開後變爲原有的顏色共有3種方法，分別是for循環（紅色），利用索引值（藍色），利用變量進行存儲（紫色）。
二、通過js的變量實現的簡單實例
1、時間轉換
代碼如下：
var s = 65; //秒
alert(Math.floor(s/60)+'分'+s%60+'秒');
alert(Math.floor(s/60)+'分'+s%60+'秒');
2、點擊按鈕，3個按鈕顏色全部改變
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js作用域的練習</title>
<style>
h1{ height:30px; width:300px; font-size:25px; line-height:30px; text-align:center; border:2px solid pink; margin:40px auto;}
</style>
<script>
window.onload = function(){
var aInp = document.getElementsByTagName('input');
for( var i=0;i<aInp.length;i++){
aInp[i].onclick = function(){
alert(i); //後面無var時值爲3，後面有var時值爲undefined
for( var i=0;i<aInp.length;i++){
aInp[i].style.background = 'yellow';
}
}
}
}
</script>
</head>
<body>
<h1>js的作用域的練習</h1>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js作用域的練習</title>
<style>
h1{ height:30px; width:300px; font-size:25px; line-height:30px; text-align:center; border:2px solid pink; margin:40px auto;}
</style>
<script>
window.onload = function(){
var aInp = document.getElementsByTagName('input');
for( var i=0;i<aInp.length;i++){
aInp[i].onclick = function(){
alert(i); //後面無var時值爲3，後面有var時值爲undefined
for( var i=0;i<aInp.length;i++){
aInp[i].style.background = 'yellow';
}
}
}
}
</script>
</head>
<body>
<h1>js的作用域的練習</h1>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
</body>
</html>
注意：當for循環中alert(i)時，出現的不是0、1、2....而是直接是for循環的長度，如果想 找出第一個for循環的0、1、2.....並對它們進行操作，應再用一次for循環。