人生短暫，廢話不多說，直奔主題！
這個小實例的要求：
實現在頁面中輸出99乘法表。（要求：以每三行為一組，實現隔行變色（顏色為白，紅，黃（也可自己定義）），鼠標滑過每一行，行背景顏色變為藍色，鼠標離開又恢復原來的顏色），隔行變色的效果需要用if和switch兩種判斷方式都能實現；
額，分析一下實例要求：一個99乘法表，一個多方法的隔行變色，鼠標滑過變另外一個顏色，離開恢復原色。 嗯，我們一步步來吧！
99乘法表的實現，我相信很多人都知道怎么實現，無非是2個for循環得到的結果，這里我就不多做解釋，還不理解的同學可以仔細研究一下代碼，研究一下實現的原理，我在核心代碼那里寫一點小注釋，方便你理解：
1 /* 2 99乘法表的表達式是 i*j 如： 1*2 2*2 3 所以第一個數從0-9，分別乘以0-9，就得到了99乘法表 4 */ 5 //這里定義是為了記錄id的 6 var cur = 0; 7 //這里是第一位數 8 for(var i=0;i<=9;i++){ 9 //這里是第二位數 10 for(var j=0;j<=i;j++){ 11 var sum = i*j; 12 //這里創建div 13 var Div = document.createElement("div"); 14 Div.id = cur ; 15 Div.style.top = i*35 + 'px'; 16 Div.style.left = j*105 + 'px'; 17 cur++; 18 //這里賦值 19 Div.innerHTML = j+"*"+i+"="+sum; 20 document.body.appendChild(Div); 21 } 22 }
css樣式我就不寫了，分到的效果就是這樣的：
小學99乘法表，大家都很熟悉，那我們實現第二個功能，隔行變色，要求是用if和switch實現，那我們先用for來實現（這里用的3種顏色是：綠，灰，橙）：
var cur = 1;
var bg = null;
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i*35 + 'px';
Div.style.left = j*105 + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num);
if(cur%3 == 0){
bg="green";
}else if(cur%3 == 1){
bg="grey";
}else if(cur%3 == 2){
bg="orange";
oDiv.style.backgroundColor= bg;
}
}
實現效果是這樣的：
用switch方法實現：
var cur = 1;
var bg = null;
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i*35 + 'px';
Div.style.left = j*105 + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num);
switch(cur%3){
case 0 :
bg="green";
break;
case 1 :
bg="grey";
break;
case 2 :
bg="orange";
break;
}
oDiv.style.backgroundColor= bg;
}
}
實現效果是這樣的：
效果好像無差，哈哈，說來實現方法也是挺簡單的，現在看看移入表色是怎么做的，以switch判斷為例：
1 var cur = 1; 2 var bg = null; 3 for(var i=0;i<=9;i++){ 4 for(var j=0;j<=i;j++){ 5 var sum = i*j; 6 var Div = document.createElement("div"); 7 var num = "div" + cur; 8 Div.id = num ; 9 Div.style.top = i*35 + 'px'; 10 Div.style.left = j*105 + 'px'; 11 cur++; 12 Div.innerHTML = j+"*"+i+"="+sum; 13 document.body.appendChild(Div); 14 var oDiv = document.getElementById(num); 15 16 switch(cur%3){ 17 case 0 : 18 bg="green"; 19 break; 20 case 1 : 21 bg="grey"; 22 break; 23 case 2 : 24 bg="orange"; 25 break; 26 } 27 28 oDiv.style.backgroundColor= bg; 29 } 30 } 31 var oDiv = document.getElementsByTagName("div"); 32 var len = oDiv.length; 33 for(var i=0;i<len;i++){ 34 //鼠標移入 35 oDiv[i].onmouseover = function(){ 36 //第一種寫法，可以獲取行內樣式（用style包起來的），也可以獲取樣式表中的樣式，且值為計算過的 37 //var defaultBg = getStyle(this,'background-color'); 38 //第二種寫法，只能獲取style包起來的行內樣式，值沒有經過計算 39 var defaultBg = this.style.backgroundColor; //這里是為了存元素剛移入時的背景顏色 40 this.style.backgroundColor = 'red'; 41 this.onmouseout = function(){ 42 this.style.backgroundColor = defaultBg; 43 } 44 } 45 } 46 //這里是獲取元素的樣式值，兼容性寫法 47 function getStyle(obj,attr){ 48 if(obj.currentStyle){ 49 return obj.currentStyle[attr]; 50 }else{ 51 return getComputedStyle(obj,false)[attr]; 52 } 53 }
得到的效果我就不截圖了，自行腦補，或者自己也寫一下，到此，所以的要求都寫完了！你以為真的到這里就完了嗎？按照我一貫的風格，當然沒有完，后面還有料！往下看：
你不覺得這個隔行變色有點奇怪嗎，確實是隔行變了色，如果是100*100的div，效果杠杠的，但是像99乘法表這樣的結果，我只能說呵呵，那能不能讓99乘法表實現像100*100的div那樣的隔行變色呢？咱們說工匠精神，就是要在乎這些細枝末節，寫寫看唄！
原理：100*100的div，如果我給每一個編一個號，用橫軸和縱軸表示，像這樣：
那我們就知道，什么數值對應什么顏色了，轉化成99乘法表就是這樣：
那，思路就來了，如果我給每個div加一個標記，表示他是第幾行的第幾列，我就知道他是什么顏色，那代碼就如下：
1 var cur = 1; 2 var bg = null; 3 for(var i=0;i<=9;i++){ 4 for(var j=0;j<=i;j++){ 5 var sum = i*j; 6 var Div = document.createElement("div"); 7 var num = "div" + cur; 8 Div.id = num ; 9 Div.style.top = i*35 + 'px'; 10 Div.style.left = j*105 + 'px'; 11 Div.setAttribute('abc',i+''+j);//核心代碼就是這里啦，給每一個div 自定義一個屬性abc，將坐標賦值給它 12 cur++; 13 Div.innerHTML = j+"*"+i+"="+sum; 14 document.body.appendChild(Div); 15 } 16 } 17 18 var oDiv = document.getElementsByTagName("div"); 19 for(var i=0;i<oDiv.length;i++){ 20 var val = oDiv[i].getAttribute('abc');//這里獲取自定義屬性的值 21 //用這個值來判斷什么位置應該是什么顏色 22 switch(val%3){ 23 case 0 : 24 bg="green"; 25 break; 26 case 1 : 27 bg="grey"; 28 break; 29 case 2 : 30 bg="orange"; 31 break; 32 } 33 oDiv[i].style.backgroundColor= bg; 34 }
得到的效果就是這樣的：
效果是不是棒棒噠，比上面的感覺還是舒服許多，所以，記住自定義屬性的強大功能，它能做很多棒棒噠事情，有時間，專門講講自定義屬性的牛X應用，哈哈！
工匠精神，我們再擴展一下，把上面的代碼稍微整理一下，做一個簡單的小封裝，就變成了一個求階乘的隔行變色的小應用，感覺瞬間變得：就這樣 feel 倍爽！
1 function multiTable(m){ 2 var cur = 1; 3 var bg = null; 4 for(var i=0;i<=m;i++){ 5 for(var j=0;j<=i;j++){ 6 var sum = i*j; 7 var Div = document.createElement("div"); 8 var num = "div" + cur; 9 Div.id = num ; 10 Div.style.top = i*35 + 'px'; 11 Div.style.left = j*105 + 'px'; 12 Div.setAttribute('abc',i+''+j);//核心代碼就是這里啦，給每一個div 自定義一個屬性abc，將坐標賦值給它 13 cur++; 14 Div.innerHTML = j+"*"+i+"="+sum; 15 document.body.appendChild(Div); 16 } 17 } 18 19 var oDiv = document.getElementsByTagName("div"); 20 for(var i=0;i<oDiv.length;i++){ 21 var val = oDiv[i].getAttribute('abc');//這里獲取自定義屬性的值 22 //用這個值來判斷什么位置應該是什么顏色 23 switch(val%3){ 24 case 0 : 25 bg="green"; 26 break; 27 case 1 : 28 bg="grey"; 29 break; 30 case 2 : 31 bg="orange"; 32 break; 33 } 34 oDiv[i].style.backgroundColor= bg; 35 } 36 } 37 multiTable(9);
到此，該效果基本上就講的差不多了，你以為就這樣就完了嗎？ 咳咳~~，是的，就這么完了，謝謝大家！
行文倉促，有講的不對的地方，或者是哪里有錯誤，請不吝賜教，及時指正，不勝感激！