JavaScript implementation of the 99 multiplication table and the example code of interlacing _javascript tips

Project requirements: Implementation of the output in the page 99 multiplication table. (Requirement: A group of three acts per to achieve the color of the interlace (white, red, yellow (also can be defined), the mouse over each row, the line background color into blue, the mouse left and restore the original color), the effect of interlaced discoloration needs to use if and switch two kinds of judgment can be achieved;

Well, analyze the example requirements: a 99 multiplication table, a multi-method of interlaced discoloration, the mouse slipped over to another color, leaving the restoration of primary colors. Well, let's go step by step!

99 the realization of the multiplication table, I believe a lot of people know how to achieve, nothing more than 2 for loop results, here I do not explain, not understand the students can carefully study the code, study the principle of implementation, I wrote a little note in the core code to facilitate your understanding:

/* The expression of the multiplication table is i*j such as: * *
so the first number from-, multiplied by-, we get the multiplication table
/////Here is defined to record the ID of
var cur =;
Here is the first digit for
(var i=;i<=;i++) {
//Here is the second digit for
(var j=;j<=i;j++) {
var sum = i*j;
Here create div
var div = document.createelement ("div");
div.id = cur;
Div.style.top = i* + ' px ';
Div.style.left = j* + ' px ';
cur++;
Here the assignment
div.innerhtml = j+ "*" +i+ "=" +sum;
Document.body.appendChild (DIV);
} 

CSS style I will not write, the effect is to be divided into this:

Primary 99 multiplication table, we are very familiar with, then we realize the second function, interlacing, the requirement is to use if and switch implementation, then we first use for to achieve (here 3 colors are: Green, Gray, Orange):

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;
}

The implementation effect is this:

Implemented using the Switch method:

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;
}

The implementation effect is this:

The effect seems to be no bad, haha, the realization method is also quite simple, now see how to move into the table color is done, to switch judgment as an example:

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";
} odiv.style.backgroundcolor= BG;
} var odiv = document.getElementsByTagName ("div");
var len = odiv.length;
for (Var i=;i<len;i++) {//mouse move in odiv[i].onmouseover = function () {///The first way to get inline styles (wrapped in style), or to get styles in a style sheet, with a value of a calculated
var DEFAULTBG = GetStyle (this, ' background-color '); The second way, can only get style wrapped in the inline style, the value has not been calculated var DEFAULTBG = This.style.backgroundColor;
This is to save the background color This.style.backgroundColor = ' red ' When the element is just moved; 
This.onmouseout = function () {this.style.backgroundColor = DEFAULTBG;}} //Here is the style value of the get element, the compatibility spelling function GetStyle (obj,attr) {if (Obj.currentstyle) {return Obj.currentstyle[attr]; 
}else{return getComputedStyle (Obj,false) [attr]; } 
}

Get the effect I will not screenshot, the brain to fill, or I also write, to this, so the requirements are finished! You think it's over when you really get here? According to my consistent style, of course, not finished, there is material behind! Look down:

Don't you think this interlacing color is a bit strange, it is indeed interlaced color, if it is 100*100 Div, the effect of the lever, but like the results of the 99 multiplication table, I can only say oh, that can make 99 multiplication table to achieve like 100*100 div such as interlacing color? We say that the Craftsman spirit, is to care about these details, write and read Bai!

Principle: 100*100 Div, if I give each one a number, with the horizontal and vertical axes, like this:

Then we know what the value corresponds to what color, the conversion into a 99 multiplication table is this:

So, the idea is, if I add a tag to each div to indicate that he is the first column of the first few lines, I know what color he is, and the code is as follows:

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);/The core code is here, give each div a custom attribute ABC, assign the coordinates to it
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 ');//Here Gets the value of the custom attribute
// Use this value to determine what position should be what color
switch (val%) {case 
:
bg= "green";
break;
Case:
bg= "Grey";
break;
Case:
bg= "Orange";
break;
Odiv[i].style.backgroundcolor= BG;
}

The result is this:

The effect is not a bang bang, more comfortable than the feeling above, so, remember the powerful features of custom attributes, it can do a lot of stick things, have time to talk about the custom attributes of the cow x application, haha!

Craftsman Spirit, we expand again, the above code a little bit tidy up, do a simple small package, it becomes a factorial of the interlacing color of the small application, feeling instantly become: so feel times cool!

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);/The core code is here, give each div a custom attribute ABC, assign the coordinates to it
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 ');//Here Gets the value of the custom attribute
// Use this value to determine what position should be what color
switch (val%) {case 
:
bg= "green";
break;
Case:
bg= "Grey";
break;
Case:
bg= "Orange";
break;
Odiv[i].style.backgroundcolor= bg;
}
}
Multitable ();

About the small part of the JavaScript to introduce the implementation of 99 multiplication table and alternate color of the example code to introduce so many, I hope to help you!