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对象模型-执行模型
Apr 28 Javascript
Prototype Array对象 学习
Jul 19 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
Vue+Django项目部署详解
May 30 Javascript
JavaScript数组及常见操作方法小结
Nov 13 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
第十二节--类的自动加载
2006/11/16 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
python字典get()方法用法分析
2015/04/17 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
pytorch实现线性拟合方式
2020/01/15 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
python的链表基础知识点
2020/09/13 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
给朋友的道歉信
2014/01/09 职场文书
综合实践教学反思
2014/01/31 职场文书
县级文明单位申报材料
2014/05/23 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
优秀大学生自荐信
2015/03/26 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
小学同学聚会感言
2015/07/30 职场文书