项目要求：页面输出99乘法表。(要求：每三行设置一次，实现隔行变色(颜色有白、红、黄(也可自行定义))。当鼠标滑过每一行时，该行的背景颜色变为蓝色，当鼠标离开时，原始颜色恢复。)，交错变色的效果需要同时通过if和switch来实现。

嗯，分析一个例子的要求：一个99乘法表，一个多方法隔行变色，一个鼠标滑动改变另一种颜色，离开恢复原色。好吧，让我们一步一步来！

相信很多人都知道乘法表是怎么实现的，无非是两个for循环的结果。这里就不解释了。不懂的同学可以仔细研究代码和实现原理。我会在核心代码中写一点评论，供大家理解。

/*乘法表的表达式是i*j，比如：* *，那么第一个数乘以-，就得到乘法表。*///这里的定义是记录id的var cur=值；//这里是(var I=；I=；I ){//这里第二位数字为(var j=；j=I；j){ var sum=I * j；//在此创建div var div=document . create element(' div ')；Div.id=curdiv . style . top=I * ' px '；div . style . left=j * ' px '；cur//这里赋值Div.innerHTML=j ' * ' i '=' sumdocument . body . appendchild(Div)；}}我不会写CSS样式，分配的效果是这样的：

小学99的乘法表大家都很熟悉，所以我们实现了第二个功能，隔行变色，这是需要通过if和switch来实现的，所以我们先用for来实现(这里用到的三种颜色是：绿色、灰色和橙色):

var cur=1；var bg=nullfor(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 ' curDiv.id=numdiv . style . top=I * 35 ' px '；div . style . left=j * 105 ' px '；curDiv.innerHTML=j ' * ' i '=' sumdocument . 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 . background COlOr=BG；}}实现效果如下：

用开关方法实现：

var cur=1；var bg=nullfor(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 ' curDiv.id=numdiv . style . top=I * 35 ' px '；div . style . left=j * 105 ' px '；curDiv.innerHTML=j ' * ' i '=' sumdocument . body . appendchild(Div)；var oDiv=document . getelementbyid(num)；开关(cur % 3){案例0 :bg='绿色'；打破；案例1 :bg='灰色'；打破；案例2 :bg=' orange打破；} odiv . style . background COlOr=BG；}}实现效果如下：

看来效果还不错。哈哈，实现方法也挺简单的。现在我们来看看如何移入表色，并以开关判断为例：

var cur=；var bg=null对于(var I=；I=；I){ for(var j=；j=I；j){ var sum=I * j；var Div=document . CreateElement(' Div ')；var num=' div ' curDiv.id=numdiv . style . top=I * ' px '；div . style . left=j * ' px '；curDiv.innerHTML=j ' * ' i '=' sumdocument . body . appendchild(Div)；var oDiv=document . getelementbyid(num)；开关(cur %){ case : BG=' green '；打破；案例：bg='灰色'；打破；case :bg=' orange打破；} odiv . style . background COlOr=BG；} } var oDiv=document . getelementsbytagname(' div ')；var len=oDiv.length对于(var I=；伊琳；I ){//将鼠标移到odiv [I]中。onmouseover=function(){//第一个writing方法可以获取行中的样式(用style包装)或者样式表中的样式，计算得到的值是//var default BG=getstyle(这个，‘background-color’)；//第二种方式，只能得到按样式包装的内嵌样式，数值还没有计算。var默认BG=this . style . background color；//这是为了保存这个的背景色。当元素刚刚移入时，style.backgroundcolor=' redthis . onmouseout=function(){ this . style . background COlOr=DefaultBG；} } }//这里是元素的样式值，兼容性写成函数getstyle (obj，attr) {if (obj。currentstyle) {return obj。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；}}我不会把我得到的结果截图，但我会自己编脑子，或者自己写。这里，所有的要求都写好了！你认为它真的在这里吗？按照我平时的风格，当然还没完，后面还有素材！往下看：

你不觉得这交错变色有点奇怪吗？确实是隔行变色。如果是100*100的div，效果是杠杠的，但是结果像99乘法表，我只能说呵呵，能不能让99乘法表像100*100的div一样实现隔行变色？我们说工匠精神，要关心这些细节，写出来。

原理：100*100的div，如果我给每一个都一个数字，用横轴和纵轴表示，像这样：

那么我们就知道什么颜色对应什么值，这就是它如何转换成99乘法表的：

然后，思路来了。如果我在每个div中添加一个标签来指示它是哪一行的哪一列，我就会知道它是什么颜色，代码如下：

var cur=；var bg=null对于(var I=；I=；I){ for(var j=；j=I；j){ var sum=I * j；var Div=document . CreateElement(' Div ')；var num=' div ' curDiv.id=numdiv . style . top=I * ' px '；div . style . left=j * ' px '；Div.setAttribute('abc '，I ' ' j)；//这是核心代码。为每个div定制属性abc，并为其cur分配坐标。Div.innerHTML=j ' * ' i '=' sumdocument . body . appendchild(Div)；} } var oDiv=document . getelementsbytagname(' div ')；对于(var I=；碘长度；i ){var val=oDiv[i]。getAttribute(' ABC ')；//在这里获取自定义属性的值//用这个值判断哪个位置应该是哪个颜色开关(val %){ case : BG=' green '；打破；案例：bg='灰色'；打破；case :bg=' orange打破；} OdiV[I]. style . background COlOr=BG；}效果是这样的：

效果好不好比上面的感觉舒服多了。因此，记住自定义属性的强大功能，它可以做很多伟大的事情。有时间可以聊聊自定义属性的牛X应用，哈哈！

工匠精神，我们再扩展一下，把上面的代码稍微整理一下，做一个简单的包，就会变成一个寻求阶乘交错变色的小应用，感觉会瞬间变成：就这样，感觉爽了一倍！

函数multi table(m){ var cur=；var bg=null对于(var I=；I=m；I){ for(var j=；j=I；j){ var sum=I * j；var Div=文档。create element(' Div ')；var num=' div ' Codeiv . id=numdiv。风格。top=I * ' pxdiv。风格。left=j * ' pxDiv.setAttribute('abc '，I ' ' j)；//核心代码就是这里啦，给每一个差异自定义一个属性abc，将坐标赋值给它curdiv . innerhtml=j ' * ' I '=' sum document。尸体。append child(Div)；} } var oDiv=document。getelementsbytagname(' div ')；对于(var I=；碘长度；i ){var val=oDiv[i].getAttribute(' ABC ')；//这里获取自定义属性的值//用这个值来判断什么位置应该是什么颜色开关(val %){案例： BG='绿色'；打破；案例：bg='灰色；打破；案例：bg='橙色打破；} OdiV[I]。风格。背景颜色=BG} } MultiTable()；关于小编给大家介绍的Java脚本语言实现99乘法表及隔行变色实例代码就给大家介绍这么多，希望对大家有所帮助！