JavaScript实现99乘法表及隔行变色实例代码_javascript技巧

《JavaScript实现99乘法表及隔行变色实例代码_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、JavaScript实现99乘法表及隔行变色实例代码项目需求：实现在页面中输川99乘法表。（要求：以每三行为一组，实现隔行变色（颜色为口，红，黄（也可自己定义）），鼠标滑过每一行，行背景颜色变为蓝色，鼠标离开乂恢复原来的颜色），隔行变色的效果需要用if和switch两种判断方式都能实现；额，分析一下实例要求：一个99乘法表，一个多方法的隔行变色，鼠标滑过变另外一个颜色，离开恢复原色。嗯，我们一步步來吧！99乘法表的实现，我相信很多人都知道怎么实现，无非是2个for循环得到的结果，这里我就不多做解释，还不理解的同学可以仔细研究一下代码，研

2、究一下实现的原理，我在核心代码那里写一点小注释，方便你理解：/*乘法表的表达式是i*j如：**所以第一个数从-，分别乘以-，就得到了乘法表*///这里定义是为了记录id的varcur二；//这里是第一位数for(vari=;i<=;i++){//这里是第二位数for(varj二;j〈二i;j++){varsum二i*j;//这里创建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*小学99乘法表，大家都很熟悉，那我们实现第二个功能，隔行变色，耍求是用if和switch实现，那我们先用for来实现（这里用的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;实现效果是这样的: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方法实现: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;}}实现效果是这样的：0*0=00*1=01*1=10*2=01*2=2