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


Posted in Javascript onFebruary 24, 2016

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

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

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

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

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

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

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

var cur = 1;
var bg = null;
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
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(Div);
var oDiv = document.getElementById(num);
if(cur%3 == 0){
bg="green";
}else if(cur%3 == 1){
bg="grey";
}else if(cur%3 == 2){
bg="orange"; 
oDiv.style.backgroundColor= bg;
}
}

实现效果是这样的:

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

用switch方法实现:

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

实现效果是这样的:

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

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

var cur = ;
var bg = null;
for(var i=;i<=;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
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(Div);
var oDiv = document.getElementById(num); 
switch(cur%){
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv.style.backgroundColor= bg;
}
}
var oDiv = document.getElementsByTagName("div");
var len = oDiv.length;
for(var i=;i<len;i++){
//鼠标移入
oDiv[i].onmouseover = function(){
//第一种写法,可以获取行内样式(用style包起来的),也可以获取样式表中的样式,且值为计算过的
//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(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; 
} 
}

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

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

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

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

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

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

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

var cur = ;
var bg = null;
for(var i=;i<=;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
Div.setAttribute('abc',i+''+j);//核心代码就是这里啦,给每一个div 自定义一个属性abc,将坐标赋值给它
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
}
}
var oDiv = document.getElementsByTagName("div");
for(var i=;i<oDiv.length;i++){
var val = oDiv[i].getAttribute('abc');//这里获取自定义属性的值
//用这个值来判断什么位置应该是什么颜色
switch(val%){ 
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv[i].style.backgroundColor= bg;
}

得到的效果就是这样的:

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

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

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

function multiTable(m){
var cur = ;
var bg = null;
for(var i=;i<=m;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
Div.setAttribute('abc',i+''+j);//核心代码就是这里啦,给每一个div 自定义一个属性abc,将坐标赋值给它
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
}
}
var oDiv = document.getElementsByTagName("div");
for(var i=;i<oDiv.length;i++){
var val = oDiv[i].getAttribute('abc');//这里获取自定义属性的值
//用这个值来判断什么位置应该是什么颜色
switch(val%){ 
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break; 
}
oDiv[i].style.backgroundColor= bg;
}
}
multiTable();

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

Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
js单例模式详解实例
Nov 21 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 #Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 #Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 #Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 #Javascript
JQuery EasyUI的使用
Feb 24 #Javascript
使用jQuery监听DOM元素大小变化
Feb 24 #Javascript
JavaScript中的闭包
Feb 24 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
初学Python函数的笔记整理
2015/04/07 Python
Python探索之SocketServer详解
2017/10/28 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python socket模块方法实现详解
2019/11/05 Python
Pycharm修改python路径过程图解
2020/05/22 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
大二自我鉴定范文
2013/10/05 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
面试感谢信范文
2015/01/22 职场文书
python 逐步回归算法
2021/04/06 Python
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript