位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享JavaScript实现99乘法表及隔行变色实例代码,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

实现效果是这样的:

用switch方法实现:

实现效果是这样的:

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

效果好像无差,哈哈,说来实现方法也是挺简单的,现在看看移入表色是怎么做的,以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的设计模式有哪些)

  • 用于员工福利的进项税转出分录
  • 应交税费课程
  • 企业销售商品房需要缴纳什么税费
  • 应付职工薪酬明细账模板
  • 合作社开具的免税农产品发票
  • 小企业取得存货计量的原则
  • 销售无形资产收款通过第三方平台能少交税吗
  • 增值税是购货方交还是销货方交
  • 现金存入公司账户风险大吗安全吗
  • 对外报价时应考虑哪些因素
  • 申报退税金额是0是怎么回事
  • 私车公用油费计入什么科目
  • 个人所得税申报方式选哪个比较好
  • 91开头的税号是什么
  • 房地产企业汇算清缴政策解析
  • 公司个税申报是什么意思
  • 地税局完税证明去哪里办理
  • 金蝶软件不审核直接过账
  • 分公司企业所得税怎么缴纳
  • 红字专用发票信息表编号在哪儿
  • 第一次申领发票可以增额吗?
  • 企业所得税纳税调整事项有哪些
  • 企业发工资扣缴个人承担部分如何做账?
  • 对外捐赠会计和税法差异调整
  • windows10.0
  • 内存条松动导致黑屏
  • 成本加成法的缺点
  • win10右键显示设置打不开怎么办
  • 简要说明php web的工作流程
  • 税务实名认证是不是就是税务登记
  • 一本书装订费多少钱
  • 员工宿舍中介费计入什么科目
  • 取得的进项税发票抵扣
  • 关于固定资产抵扣的税务规定
  • springboot常用
  • 餐饮企业送餐等级标准
  • k8s安装步骤
  • php逆序排列数组
  • 企业没有实缴
  • 前端跨域解决方案设计
  • 勘察测绘公司是做什么的
  • php屏蔽ip
  • 休产假期间社保个人部分怎么办
  • 库存盘点差异会计分录
  • 销售边角料的会计分录
  • 土石方工程开票范围
  • 固定资产的主要风险有哪些
  • 水利建设基金的计费方式
  • Dedecms评论同时发到QQ邮箱的实现方法
  • 费用发票可以抵扣进项税吗
  • 长期待摊费用的账务处理
  • mysql字符串字段数据类型
  • 待认证进项税额认证以后怎么做分录
  • 赠送商品入什么科目
  • 固定资产停产需要计提折旧吗
  • 销售软件产品
  • 销售返利是否需要交税
  • 在建工程的会计代码
  • 公司想自己开发票怎么申请
  • 一般纳税人会计分录
  • 会计账簿的扉页只需填列账簿启用日期和经管人员一览表
  • 一个企业建账需要注意些什么
  • mysql中排序
  • win8.1退回win8
  • ubuntu配置yum
  • windowspe安装win7
  • linux磁盘格式化后一定会清空数据吗
  • svn怎么切换用户名
  • 进程 内核栈
  • freelibrary 程序崩溃
  • windows视频截屏
  • win8系统怎么进入控制面板
  • 2015-04-04---CCAction详解(欠了大家好几天了)
  • linux判断脚本执行成功
  • js动态改变div内容
  • js的继承方式
  • scrollbottom用法
  • 中国税务定额发票怎么开
  • 中国税务局官网热线
  • 公务员考试税局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设