菜单

【澳门太阳娱乐手机登录】JavaScript实现99乘法表及隔行变色实例代码_javascript技巧_脚本之家

2020年3月12日 - 澳门太阳娱乐手机登录

品种需要:实以往页面中输出99乘法表。(必要:以每三行事一组,实现隔行变色,鼠标滑过每一行,行背景颜色变为灰绿,鼠标离开又重整旗鼓原本的水彩),隔行变色的功效必要用if和switch两种推断方法都能贯彻;

额,剖析一下实例必要:三个99乘法表,贰个多方式的隔行变色,鼠标滑过变其它三个颜料,离开恢复原色。
嗯,我们一步步来啊!

澳门太阳娱乐手机登录,【澳门太阳娱乐手机登录】JavaScript实现99乘法表及隔行变色实例代码_javascript技巧_脚本之家。99乘法表的兑现,作者相信广大人都通晓怎么落到实处,无非是2个for循环获得的结果,这里笔者就非常少做解释,还不通晓的同窗能够细心钻探一下代码,钻探一下兑现的规律,作者在主导代码这里写一点小注释,方便你知道:

/*乘法表的表达式是 i*j 如: * *所以第一个数从-,分别乘以-,就得到了乘法表*///这里定义是为了记录id的var cur = ;//这里是第一位数for{//这里是第二位数for{var sum = i*j;//这里创建divvar Div = document.createElement;Div.id = cur ;Div.style.top = i* + 'px';Div.style.left = j* + 'px';cur++;//这里赋值Div.innerHTML = j+"*"+i+"="+sum;document.body.appendChild;} }

css样式小编就不写了,分到的效果与利益便是这样的:

小学99乘法表,我们都很熟谙,那我们兑现第4个功效,隔行变色,需要是用if和switch落成,那大家先用for来促成:

var cur = 1;var bg = null;for{for{var sum = i*j;var Div = document.createElement;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;var oDiv = document.getElementById{bg="green";}else if{bg="grey";}else if{bg="orange"; oDiv.style.backgroundColor= bg;}} 

用switch方法完毕:

var cur = 1;var bg = null;for{for{var sum = i*j;var Div = document.createElement;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;var oDiv = document.getElementById{case 0 :bg="green";break;case 1 :bg="grey";break;case 2 :bg="orange";break; }oDiv.style.backgroundColor= bg;}} 

功能肖似无差,哈哈,说来实现情势也是挺轻巧的,以后探望移入表色是如何是好的,以switch推断为例:

var cur = ;var bg = null;for{for{var sum = i*j;var Div = document.createElement;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;var oDiv = document.getElementById{case :bg="green";break;case :bg="grey";break;case :bg="orange";break; }oDiv.style.backgroundColor= bg;}}var oDiv = document.getElementsByTagName;var len = oDiv.length;for{//鼠标移入oDiv[i].onmouseover = function(){//第一种写法,可以获取行内样式,也可以获取样式表中的样式,且值为计算过的//var defaultBg = getStyle(this,'background-color');//第二种写法,只能获取style包起来的行内样式,值没有经过计算var defaultBg = this.style.backgroundColor; //这里是为了存元素刚移入时的背景颜色this.style.backgroundColor = 'red';this.onmouseout = function(){this.style.backgroundColor = defaultBg;}} }//这里是获取元素的样式值,兼容性写法function getStyle{if{return obj.currentStyle[attr];}else{return getComputedStyle[attr]; } }

获得的作用本人就不截图了,自行脑补,大概自个儿也写一下,到此,所以的必要都写完了!你认为真的到此处就完了啊?根据自身一定的风格,当然未有完,前面还会有料!往下看:

您不感觉那个隔行变色有一点奇异吗,确实是隔行变了色,借使是100*100的div,效果杠杠的,可是像99乘法表那样的结果,笔者必须要说呵呵,那能还是不可能让99乘法表达成像100*100的div这样的隔行变色呢?咱们说工匠精气神,正是要在乎那么些小事,写写看嘛!

原理:100*100的div,如果本身给每二个编四个号,用横轴和纵轴表示,像这么:

那我们就掌握,什么数值对应什么颜色了,转产生99乘法表正是如此:

那,思路就来了,假诺本人给各类div加二个符号,表示他是第几行的第几列,作者就知道她是什么颜色,那代码就像下:

var cur = ;var bg = null;for{for{var sum = i*j;var Div = document.createElement;var num = "div" + cur;Div.id = num ;Div.style.top = i* + 'px';Div.style.left = j* + 'px';Div.setAttribute;//核心代码就是这里啦,给每一个div 自定义一个属性abc,将坐标赋值给它cur++;Div.innerHTML = j+"*"+i+"="+sum;document.body.appendChild;}}var oDiv = document.getElementsByTagName;for(var i=;i得到的效果就是这样的:效果是不是棒棒哒,比上面的感觉还是舒服许多,所以,记住自定义属性的强大功能,它能做很多棒棒哒事情,有时间,专门讲讲自定义属性的牛X应用,哈哈!工匠精神,我们再扩展一下,把上面的代码稍微整理一下,做一个简单的小封装,就变成了一个求阶乘的隔行变色的小应用,感觉瞬间变得:就这样 feel 倍爽!function multiTable{var cur = ;var bg = null;for{for{var sum = i*j;var Div = document.createElement;var num = "div" + cur;Div.id = num ;Div.style.top = i* + 'px';Div.style.left = j* + 'px';Div.setAttribute;//核心代码就是这里啦,给每一个div 自定义一个属性abc,将坐标赋值给它cur++;Div.innerHTML = j+"*"+i+"="+sum;document.body.appendChild;}}var oDiv = document.getElementsByTagName;for(var i=;i关于小编给大家介绍的JavaScript实现99乘法表及隔行变色实例代码就给大家介绍这么多,希望对大家有所帮助!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图