js实现华丽的九九乘法表效果

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title span实现的乘法表/title style type='text/css ' .包装{宽度： 800pxmargin: 20px自动；-网络工具包-用户-选择：无；蚊子用户-选择：无；-ms-用户-选择：无；用户选择：无；} span { padd : 3px font-weight : 700；显示器：内联块；线高： 30px边框-底部： 2px实心# 000000；边框-左侧： 2px实心# 000000;宽度： 80px光标：指针；} .最后{ margin-top :-2px；边框-顶部： 2px实心# 000000；右边框： 2px实心# 000000；} .bg0 {背景-颜色：黄色；} .bg1 {底色：草坪绿；} .bg2 {背景-颜色：浅蓝色；} .悬停{底色： # BB3BD 9；} .仅{底色：浅鲑鱼；}/style/head discript函数乘法(a){ var str=' div class=' wrap '；for(var I=1；I=a；I){ for(var j=1；j=I；j){ var curs tr=j ' x ' I '=' I * j；j！==我？str=' span class=' ' ' BG '(I % 3)' ' '光标tr '/span ' : str=' span class=' ' '最后一个BG '(I % 3)' ' '光标tr '/span br/'；} } str='/div '；文件。write(字符串)；}我乘法(9);var oSpans=文档。getelementsbytagname(' span ')；for(var I=0；I OspAN . LengTii){ OspAN[I].onclick=function () { //alert('我是第' parseInt(this.innerHTML)'行');alert(this.innerHTML '我在第this.innerHTML.charAt(4)行');} OspAN[I].onmouseover=function(){//console。日志(111)；var num=这个。innerhtml。charat(4)；//控制台。日志(数字)；for(var j=0；j Ospans . length j){ if(OS pan[j].innerhtml。charat(4)=num){ OS pan[j]。班级名单。添加('悬停');} }这个。班级名单。添加('仅限')；} OspAN[I].onmouseout=function(){ var num=this。innerhtml。charat(4)；for(var j=0；j Ospans . length j){ if(OS pan[j].innerhtml。charat(4)=num){ OS pan[j]。班级名单。移除('悬停');} }这个。班级名单。移除('仅限')；} }/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！