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

项目需求：实现在页面中输出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样式我就不写了，分到的效果就是这样的：

小学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