資源描述：
《JavaScript實現(xiàn)99乘法表及隔行變色實例代碼_javascript技巧》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、JavaScript實現(xiàn)99乘法表及隔行變色實例代碼項目需求：實現(xiàn)在頁面中輸川99乘法表。（要求：以每三行為一組，實現(xiàn)隔行變色（顏色為口，紅，黃（也可自己定義）），鼠標(biāo)滑過每一行，行背景顏色變?yōu)樗{色，鼠標(biāo)離開乂恢復(fù)原來的顏色），隔行變色的效果需要用if和switch兩種判斷方式都能實現(xiàn)；額，分析一下實例要求：一個99乘法表，一個多方法的隔行變色，鼠標(biāo)滑過變另外一個顏色，離開恢復(fù)原色。嗯，我們一步步來吧！99乘法表的實現(xiàn)，我相信很多人都知道怎么實現(xiàn)，無非是2個for循環(huán)得到的結(jié)果，這里我就不多做解釋，還不理解的同學(xué)可以仔細研究一下代碼，研
2、究一下實現(xiàn)的原理，我在核心代碼那里寫一點小注釋，方便你理解：/*乘法表的表達式是i*j如：**所以第一個數(shù)從-，分別乘以-，就得到了乘法表*///這里定義是為了記錄id的varcur二；//這里是第一位數(shù)for(vari=;i<=;i++){//這里是第二位數(shù)for(varj二;j〈二i;j++){varsum二i*j;//這里創(chuàng)建divvarDiv=document.creatcElernent(〃div〃)；Div.id=cur;Div.style,top二i*+'px';Div.style,left二j*+'px';cur++;/
3、/這里賦值Div.innerHTML=j+〃*"+i+〃二〃+sum;document.bodv.appendChild(Div);}}CSS樣式我就不寫了，分到的效果就是這樣的:0*0=00*1=01*1=10*2=01*2=22*2=40*3=01*3二32*3=63*3=90*4=01*4二42*4=83*4二124*4二160*5=01*5=52*5二103*5=154*5二205*5=250*6=01*6二62*6=123*6=184*6=245*6二306*0*7=01*7=72*7=143*7=214*7=285*7=35
4、6*0*8=01*8=82*8=163*8=244*8=325*8=406*0*9=01*9=92*9=183*9=274*9=365*9=456*小學(xué)99乘法表，大家都很熟悉，那我們實現(xiàn)第二個功能，隔行變色，耍求是用if和switch實現(xiàn)，那我們先用for來實現(xiàn)（這里用的3種顏色是:綠，灰,橙）:varcur=1;varbg=null;for(vari二0;i〈二9;i++){for(varj二0;j〈二i;j++){varsum二i*j;varDiv=document.createElement(z，div，z);varnum=〃d
5、iv〃+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);varoDiv=document?getElementByTd(num);if(cur%3==0){bg=green;}elseif(cur%3==1){bg二〃grey〃；}elseif(cur%3二二2){bg=，，orangc〃；oDiv.style.backgr
6、oundColor=bg;實現(xiàn)效果是這樣的:0*2=01*1=11*2=20*6=01*3=31*4=41*5=51*6=60*7=01*7=70*8=01*8=80*9=01*9=92*4=83*3=93*4二124*4=162*5=102*6=123*5=154*5=205*5=255*6=303*6=184*6=242*7=142*8=162*9=185*7=356*6*6*用switch方法實現(xiàn):varcur二1;varbg=rml1;for(vari=0;i<=9;i++){for(varj=0;j<=i;j++){varsu
7、m=i*j;varDiv二document.createElement(/zdivz/);varnum=〃div〃+cur;Div.id=num;Div.style,top=i*35+Jpx，;Div.style,left二j*105+'px';cur++;Div.innerHTML=j+〃*〃+i+"二〃+sum;document.body,appendCh訂d(Div);varoDiv=document,gctElcmcntByld(num);switch(cur%3){case0:bg=/，greenz，;break;case1:
8、bg=grey;break;case2:bg=oran^e;break;}oDiv.style.backgroundColor=bg;}}實現(xiàn)效果是這樣的：0*0=00*1=01*1=10*2=01*2=2
