位置: 编程技术 - 正文
JavaScript实现99乘法表及隔行变色实例代码
编辑：rootadmin推荐整理分享JavaScript实现99乘法表及隔行变色实例代码，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
项目需求：实现在页面中输出乘法表。（要求：以每三行为一组，实现隔行变色（颜色为白，红，黄（也可自己定义）），鼠标滑过每一行，行背景颜色变为蓝色，鼠标离开又恢复原来的颜色），隔行变色的效果需要用if和switch两种判断方式都能实现；
额，分析一下实例要求：一个乘法表，一个多方法的隔行变色，鼠标滑过变另外一个颜色，离开恢复原色。 嗯，我们一步步来吧！
乘法表的实现，我相信很多人都知道怎么实现，无非是2个for循环得到的结果，这里我就不多做解释，还不理解的同学可以仔细研究一下代码，研究一下实现的原理，我在核心代码那里写一点小注释，方便你理解：
css样式我就不写了，分到的效果就是这样的：
小学乘法表，大家都很熟悉，那我们实现第二个功能，隔行变色，要求是用if和switch实现，那我们先用for来实现（这里用的3种颜色是：绿，灰，橙）：
实现效果是这样的：
用switch方法实现：
实现效果是这样的：
效果好像无差，哈哈，说来实现方法也是挺简单的，现在看看移入表色是怎么做的，以switch判断为例：
得到的效果我就不截图了，自行脑补，或者自己也写一下，到此，所以的要求都写完了！你以为真的到这里就完了吗？按照我一贯的风格，当然没有完，后面还有料！往下看：
你不觉得这个隔行变色有点奇怪吗，确实是隔行变了色，如果是*的div，效果杠杠的，但是像乘法表这样的结果，我只能说呵呵，那能不能让乘法表实现像*的div那样的隔行变色呢？咱们说工匠精神，就是要在乎这些细枝末节，写写看呗！
原理：*的div，如果我给每一个编一个号，用横轴和纵轴表示，像这样：
那我们就知道，什么数值对应什么颜色了，转化成乘法表就是这样：
那，思路就来了，如果我给每个div加一个标记，表示他是第几行的第几列，我就知道他是什么颜色，那代码就如下：
得到的效果就是这样的：
效果是不是棒棒哒，比上面的感觉还是舒服许多，所以，记住自定义属性的强大功能，它能做很多棒棒哒事情，有时间，专门讲讲自定义属性的牛X应用，哈哈！
工匠精神，我们再扩展一下，把上面的代码稍微整理一下，做一个简单的小封装，就变成了一个求阶乘的隔行变色的小应用，感觉瞬间变得：就这样 feel 倍爽！
关于小编给大家介绍的JavaScript实现乘法表及隔行变色实例代码就给大家介绍这么多，希望对大家有所帮助！
JavaScript的设计模式经典之代理模式 一、代理模式概念说明：顾名思义就是用一个类来代替另一个类来执行方法功能，这个模式跟装饰模式有点相似，不一样的是，代理模式是代替客户初
JavaScript的设计模式经典之建造者模式 一、建造者模式模式概念建造者模式可以将一个复杂的对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。也就是说如果我们用了
JavaScript设计模式经典之工厂模式 一、工厂模式概念工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以
标签: JavaScript实现99乘法表及隔行变色实例代码
本文链接地址:https://www.jiuchutong.com/biancheng/380338.html 转载请保留说明！上一篇：JavaScript中Object.prototype.toString方法的原理
下一篇：JavaScript的设计模式经典之代理模式(js的设计模式有哪些)
![[6]Cocos2d-x之关于屏幕大小与节点大小、节点缩放问题(cocos2dx schedule)](https://www.jiuchutong.com/image/20240129/1706502496.jpg)
