欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-25 21:34:16
...
项目需求:实现在页面中输出99乘法表。(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现;

额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色。 嗯,我们一步步来吧!

99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解释,还不理解的同学可以仔细研究一下代码,研究一下实现的原理,我在核心代码那里写一点小注释,方便你理解:

/*乘法表的表达式是 i*j 如: * *
所以第一个数从-,分别乘以-,就得到了乘法表
*/
//这里定义是为了记录id的
var cur = ;
//这里是第一位数
for(var i=;i

css样式我就不写了,分到的效果就是这样的:

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

小学99乘法表,大家都很熟悉,那我们实现第二个功能,隔行变色,要求是用if和switch实现,那我们先用for来实现(这里用的3种颜色是:绿,灰,橙):

var cur = 1;
var bg = null;
for(var i=0;i

实现效果是这样的:

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

用switch方法实现:

var cur = 1;
var bg = null;
for(var i=0;i

实现效果是这样的:

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

效果好像无差,哈哈,说来实现方法也是挺简单的,现在看看移入表色是怎么做的,以switch判断为例:

var cur = ;
var bg = null;
for(var i=;i

得到的效果我就不截图了,自行脑补,或者自己也写一下,到此,所以的要求都写完了!你以为真的到这里就完了吗?按照我一贯的风格,当然没有完,后面还有料!往下看:

你不觉得这个隔行变色有点奇怪吗,确实是隔行变了色,如果是100*100的div,效果杠杠的,但是像99乘法表这样的结果,我只能说呵呵,那能不能让99乘法表实现像100*100的div那样的隔行变色呢?咱们说工匠精神,就是要在乎这些细枝末节,写写看呗!

原理:100*100的div,如果我给每一个编一个号,用横轴和纵轴表示,像这样:

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

那我们就知道,什么数值对应什么颜色了,转化成99乘法表就是这样:

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

那,思路就来了,如果我给每个div加一个标记,表示他是第几行的第几列,我就知道他是什么颜色,那代码就如下:

var cur = ;
var bg = null;
for(var i=;i

得到的效果就是这样的:

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

效果是不是棒棒哒,比上面的感觉还是舒服许多,所以,记住自定义属性的强大功能,它能做很多棒棒哒事情,有时间,专门讲讲自定义属性的牛X应用,哈哈!

工匠精神,我们再扩展一下,把上面的代码稍微整理一下,做一个简单的小封装,就变成了一个求阶乘的隔行变色的小应用,感觉瞬间变得:就这样 feel 倍爽!

function multiTable(m){
var cur = ;
var bg = null;
for(var i=;i

关于小编给大家介绍的JavaScript实现99乘法表及隔行变色实例代码就给大家介绍这么多,希望对大家有所帮助!