php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码

您所在的位置:网站首页 php九九乘法表表格的代码 php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码

php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码

2024-01-18 18:40| 来源: 网络整理| 查看: 265

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

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

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

/*乘法表的表达式是 i*j 如: * *

所以第一个数从-,分别乘以-,就得到了乘法表

*/

//这里定义是为了记录id的

var cur = ;

//这里是第一位数

for(var i=;i

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样式我就不写了,分到的效果就是这样的:

4032870a439dfe72d4291475e74b8e54.png

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

var cur = 1;

var bg = null;

for(var i=0;i

var sum = i*j;

var Div = document.createElement("div");

var num = "div" + cur;

Div.id = num ;

Div.style.top = i*35 + 'px



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3