JavaScript實現(xiàn)99乘法表及隔行變色實例代碼
項目需求:實現(xiàn)在頁面中輸出99乘法表。(要求:以每三行為一組,實現(xiàn)隔行變色(顏色為白,紅,黃(也可自己定義)),鼠標(biāo)滑過每一行,行背景顏色變?yōu)樗{(lán)色,鼠標(biāo)離開又恢復(fù)原來的顏色),隔行變色的效果需要用if和switch兩種判斷方式都能實現(xiàn);
額,分析一下實例要求:一個99乘法表,一個多方法的隔行變色,鼠標(biāo)滑過變另外一個顏色,離開恢復(fù)原色。 嗯,我們一步步來吧!
99乘法表的實現(xiàn),我相信很多人都知道怎么實現(xiàn),無非是2個for循環(huán)得到的結(jié)果,這里我就不多做解釋,還不理解的同學(xué)可以仔細(xì)研究一下代碼,研究一下實現(xiàn)的原理,我在核心代碼那里寫一點小注釋,方便你理解:
/*乘法表的表達(dá)式是 i*j 如: * * 所以第一個數(shù)從-,分別乘以-,就得到了乘法表 */ //這里定義是為了記錄id的 var cur = ; //這里是第一位數(shù) for(var i=;i<=;i++){ //這里是第二位數(shù) for(var j=;j<=i;j++){ var sum = i*j; //這里創(chuàng)建div var Div = document.createElement("div"); Div.id = cur ; Div.style.top = i* + 'px'; Div.style.left = j* + 'px'; cur++; //這里賦值 Div.innerHTML = j+"*"+i+"="+sum; document.body.appendChild(Div); } }
css樣式我就不寫了,分到的效果就是這樣的:
小學(xué)99乘法表,大家都很熟悉,那我們實現(xiàn)第二個功能,隔行變色,要求是用if和switch實現(xiàn),那我們先用for來實現(xiàn)(這里用的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; } }
實現(xiàn)效果是這樣的:
用switch方法實現(xiàn):
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; } }
實現(xiàn)效果是這樣的:
效果好像無差,哈哈,說來實現(xiàn)方法也是挺簡單的,現(xiàn)在看看移入表色是怎么做的,以switch判斷為例:
var cur = ; var bg = null; for(var i=;i<=;i++){ for(var j=;j<=i;j++){ var sum = i*j; var Div = document.createElement("div"); var num = "div" + cur; Div.id = num ; Div.style.top = i* + 'px'; Div.style.left = j* + 'px'; cur++; Div.innerHTML = j+"*"+i+"="+sum; document.body.appendChild(Div); var oDiv = document.getElementById(num); switch(cur%){ case : bg="green"; break; case : bg="grey"; break; case : bg="orange"; break; } oDiv.style.backgroundColor= bg; } } var oDiv = document.getElementsByTagName("div"); var len = oDiv.length; for(var i=;i<len;i++){ //鼠標(biāo)移入 oDiv[i].onmouseover = function(){ //第一種寫法,可以獲取行內(nèi)樣式(用style包起來的),也可以獲取樣式表中的樣式,且值為計算過的 //var defaultBg = getStyle(this,'background-color'); //第二種寫法,只能獲取style包起來的行內(nèi)樣式,值沒有經(jīng)過計算 var defaultBg = this.style.backgroundColor; //這里是為了存元素剛移入時的背景顏色 this.style.backgroundColor = 'red'; this.onmouseout = function(){ this.style.backgroundColor = defaultBg; } } } //這里是獲取元素的樣式值,兼容性寫法 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
得到的效果我就不截圖了,自行腦補(bǔ),或者自己也寫一下,到此,所以的要求都寫完了!你以為真的到這里就完了嗎?按照我一貫的風(fēng)格,當(dāng)然沒有完,后面還有料!往下看:
你不覺得這個隔行變色有點奇怪嗎,確實是隔行變了色,如果是100*100的div,效果杠杠的,但是像99乘法表這樣的結(jié)果,我只能說呵呵,那能不能讓99乘法表實現(xiàn)像100*100的div那樣的隔行變色呢?咱們說工匠精神,就是要在乎這些細(xì)枝末節(jié),寫寫看唄!
原理:100*100的div,如果我給每一個編一個號,用橫軸和縱軸表示,像這樣:
那我們就知道,什么數(shù)值對應(yīng)什么顏色了,轉(zhuǎn)化成99乘法表就是這樣:
那,思路就來了,如果我給每個div加一個標(biāo)記,表示他是第幾行的第幾列,我就知道他是什么顏色,那代碼就如下:
var cur = ; var bg = null; for(var i=;i<=;i++){ for(var j=;j<=i;j++){ var sum = i*j; var Div = document.createElement("div"); var num = "div" + cur; Div.id = num ; Div.style.top = i* + 'px'; Div.style.left = j* + 'px'; Div.setAttribute('abc',i+''+j);//核心代碼就是這里啦,給每一個div 自定義一個屬性abc,將坐標(biāo)賦值給它 cur++; Div.innerHTML = j+"*"+i+"="+sum; document.body.appendChild(Div); } } var oDiv = document.getElementsByTagName("div"); for(var i=;i<oDiv.length;i++){ var val = oDiv[i].getAttribute('abc');//這里獲取自定義屬性的值 //用這個值來判斷什么位置應(yīng)該是什么顏色 switch(val%){ case : bg="green"; break; case : bg="grey"; break; case : bg="orange"; break; } oDiv[i].style.backgroundColor= bg; }
得到的效果就是這樣的:
效果是不是棒棒噠,比上面的感覺還是舒服許多,所以,記住自定義屬性的強(qiáng)大功能,它能做很多棒棒噠事情,有時間,專門講講自定義屬性的牛X應(yīng)用,哈哈!
工匠精神,我們再擴(kuò)展一下,把上面的代碼稍微整理一下,做一個簡單的小封裝,就變成了一個求階乘的隔行變色的小應(yīng)用,感覺瞬間變得:就這樣 feel 倍爽!
function multiTable(m){ var cur = ; var bg = null; for(var i=;i<=m;i++){ for(var j=;j<=i;j++){ var sum = i*j; var Div = document.createElement("div"); var num = "div" + cur; Div.id = num ; Div.style.top = i* + 'px'; Div.style.left = j* + 'px'; Div.setAttribute('abc',i+''+j);//核心代碼就是這里啦,給每一個div 自定義一個屬性abc,將坐標(biāo)賦值給它 cur++; Div.innerHTML = j+"*"+i+"="+sum; document.body.appendChild(Div); } } var oDiv = document.getElementsByTagName("div"); for(var i=;i<oDiv.length;i++){ var val = oDiv[i].getAttribute('abc');//這里獲取自定義屬性的值 //用這個值來判斷什么位置應(yīng)該是什么顏色 switch(val%){ case : bg="green"; break; case : bg="grey"; break; case : bg="orange"; break; } oDiv[i].style.backgroundColor= bg; } } multiTable();
關(guān)于小編給大家介紹的JavaScript實現(xiàn)99乘法表及隔行變色實例代碼就給大家介紹這么多,希望對大家有所幫助!
相關(guān)文章
- 下面就結(jié)合我自己的體會和所學(xué)習(xí)的東東和大家一起來學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊獭?/div> 2011-08-08
XMLHTTP 亂碼的解決方法(UTF8,GB2312 編碼 解碼)
XMLHTTP 亂碼的解決方法(UTF8,GB2312 編碼 解碼)(附帶解決DHTMLX不能用中文的問題)2011-01-01詳解JavaScript中Canvas的高級繪圖和動畫技術(shù)
JavaScript中的Canvas 是一個強(qiáng)大的 HTML5 元素,允許你通過編程方式創(chuàng)建圖形、繪制圖像和實現(xiàn)復(fù)雜的動畫效果,在本文中,我們將深入探討 JavaScript Canvas 的高級繪圖和動畫技術(shù),并提供一個復(fù)雜的案例,以展示其潛力,需要的朋友可以參考下2023-10-10最新評論