位置: 编程技术 - 正文

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的设计模式有哪些)

  • 增值税发票开票软件金税盘
  • 建筑业的增值税税负
  • 印花税办理流程
  • 资产负债表债务法是什么意思
  • 一般纳税人的税点
  • 城镇土地使用税的计算公式
  • 解除劳动合同支付违约金合法吗
  • 防疫物资采购计入什么费用
  • 商誉减值是在年报还是半年报
  • 工资出现负数怎么申报个税
  • 企业所得税中的所得
  • 开模费用计入什么科目
  • 小额贷款公司的钱从哪里来
  • 公司现金支票取现用途怎么填写
  • 迟延履行利息记什么科目?
  • 年底结账时利息收入怎么做处理?
  • 补缴的公积金可以抵扣个税吗
  • 企业进口应税物资在进口环节应交的消费税,应计入
  • 水利基金的计税依据是含税收入还是不含税收入
  • 个人借款给公司借条怎么写
  • 哪些税计入原材料费用
  • 建筑工地伙食费会计分录
  • 竣工决算调整入库流程
  • 加计抵减10%政策文件
  • 固定资产清理借贷方向增减变动
  • 代理公司变更地址多少钱
  • 什么是产品?产品的举例子
  • 显示器有必要买240hz吗
  • 源码阅读技巧
  • 预加载的目的是什么
  • 棕榈滩的读音
  • php登录注册整套源码
  • 会计证的作用和用途
  • 社保已经扣款还可以减人员吗
  • 购买的商品作为赠品怎么入账
  • python元组操作方法
  • 织梦如何给栏目增加缩略图
  • 在哪里验证增值税票
  • 企业不交所得税的情况
  • 长期股权投资减值准备是什么科目
  • 医院要发票
  • 残保金如何做会计分录
  • 用人单位延迟给员工交社保怎么办
  • 预收账款和预付账款科目都是资产类科目
  • 出售在建工程的会计分录怎么做
  • 小规模企业自开收购牛发票增值税怎样申报
  • 已认证的招待费怎么入账
  • 养老保险 退钱
  • 应付账款的主要风险点
  • 业务收入和营业收入关系
  • vs2019连接mysql
  • mysql索引类型及原理
  • mysql tmp_table_size优化之设置多大合适
  • sqlserver恢复模式简单和完整
  • WIN7中的一个库最多可以包含多少个文件夹
  • 新百伦588
  • 注册表出错打不开程序
  • vnc server apk
  • ubuntu配置yum
  • executor进程
  • linux device driver
  • linux 管理员登录
  • Apache 2.0.55 for Linux 下载
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • 事件委托机制的三个主要组件
  • opengl入门视频教程
  • cssimage
  • HTML5 WebStorage(HTML5本地存储技术)
  • 常用原生js兼容软件
  • nodejs ddd
  • 详解九章算法
  • android实现推送
  • node.js快速入门
  • 在全盘搜索以win
  • 夜间模式图
  • 用jquerymobile案例
  • jquery判断checkbox是否选中及改变checkbox状态的实现方法
  • 电子三方协议怎么下载
  • 什么是契税发票?
  • 重庆税务局app下载官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设