Example code of 99 multiplication table and line-changing by using JavaScript, and javascript Multiplication

Example code of 99 multiplication table and line-changing by using JavaScript, and javascript Multiplication

Project requirement: outputs 99 multiplication tables on the page. (Requirement: use three rows as a group to change the color of the line (the color is white, red, or yellow (you can also define it yourself), move the mouse over each row, and change the line background color to blue, when the mouse leaves and restores the original color), the color of the line must be determined by the if and switch methods;

Amount, analyze the instance requirements: A 99 multiplication table, multiple methods of the line color, move the mouse over to change another color, leave to restore the primary color. Well, let's step by step!

99 multiplication table implementation, I believe many people know how to implement it. It is nothing more than the result of two for loops. Here I will not explain it more. If you do not understand it, you can study the code carefully, after studying the implementation principle, I will write a little comment on the core code to help you understand:

/* The expression of the multiplication table is I * j, for example: ** so the first number is multiplied -, the multiplication table is obtained * // The var cur = of the Record id is defined here; // the first digit is for (var I =; I <=; I ++) {// here is the second digit for (var j =; j <= I; j ++) {var sum = I * j; // create divvar Div = document here. createElement ("div"); Div. id = cur; Div. style. top = I * + 'px '; Div. style. left = j * + 'px '; cur ++; // The Div is assigned here. innerHTML = j + "*" + I + "=" + sum; document. body. appendChild (Div );}}

I will not write the css style. The effect is as follows:

Everyone is familiar with The 99 multiplication table in elementary school. Then we implement the second function, which is to use if and switch to change the color of the barrier, we first use for (the three colors here are green, gray, and 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 result is as follows:

Use 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 result is as follows:

The effect seems to be good. Haha, the implementation method is quite simple. Now let's look at how the color is moved into the table. Take the switch 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 = "gray"; break; case: bg = "orange "; break;} oDiv. style. backgroundColor = bg;} var oDiv = document. getElementsByTagName ("div"); var len = oDiv. length; for (var I =; I <len; I ++) {// move the cursor to oDiv [I]. onmouseover = function () {// first writing method, you can get the intra-row style (wrapped with style) or the style in the style sheet, and the value is calculated // var defaultBg = getStyle (this, 'background-color'); // The second method can only obtain the intra-row style wrapped in the style, the value of var defaultBg = this. style. backgroundColor; // this is the background color when the element is just moved in. this. style. backgroundColor = 'red'; this. onmouseout = function () {this. style. backgroundColor = defaultBg ;}}// here, the style value of the element is obtained. The compatibility method is function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr];} else {return getComputedStyle (obj, false) [attr];}

I won't be able to get the results. I just need to make up my mind or write it myself. At this point, all the requirements have been completed! Do you think this is the end? According to my consistent style, of course, there are still materials behind it! Look down:

Don't you think it's a little strange that the barrier color is changed. If the barrier color is 100*100 div, the effect is superb, but the result is like 99 multiplication table, I can only say that, can we make the 99 multiplication table change the color of the line as the div of 100*100? Let's say that the craftsman spirit is to care about these details and write them!

Principle: div of 100*100. If I create an ID for each part, it is represented by the horizontal and vertical axes, like this:

Then we will know what value corresponds to what color, and convert it to the 99 multiplication table as follows:

Then, the idea is coming. If I add a tag to each div to indicate that it is the first column of the row, I will know what color it is, and the code will be 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. Define an attribute abc for each div and 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'); // obtain the value of the custom attribute here // use this value to determine the position and color of the switch (val %) {case: bg = "green"; break; case: bg = "gray"; break; case: bg = "orange"; break;} oDiv [I]. style. backgroundColor = bg ;}

The result is as follows:

Whether the effect is great or not. It is much more comfortable than above. Therefore, remember the powerful features of Custom Attributes. It can do a lot of great things with time, let's talk about the app X with custom attributes. Haha!

The craftsman spirit, let's expand it, sort out the above Code a little, and make a simple small package, it will become a small application for the division of the factorial color, the feeling instantly becomes: in this way, feel is 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. Define an attribute abc for each div and 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'); // obtain the value of the custom attribute here // use this value to determine the position and color of the switch (val %) {case: bg = "green"; break; case: bg = "gray"; break; case: bg = "orange"; break;} oDiv [I]. style. backgroundColor = bg ;}} multiTable ();

I will introduce so much code about the example code of the simple editor to introduce JavaScript to realize 99 multiplication tables and interlace discoloration. I hope it will be helpful to you!

Articles you may be interested in:

• The row-based color change of the JS control table
• Code for the 9-9 multiplication table implemented by javascript and jquery respectively
• JavaScript code for changing the color of the line and the color of the mouse over the line
• Jsp/javascript print the code of the 9th multiplication table
• Simple implementation of JS small functions (the interface of the List page is discolored)
• Native JS operation webpage adds the onclick event to the p element and the table line color.
• Js modulo (remainder)
• How to implement a trapezoid multiplication table using JavaScript
• JS achieves symmetric 9-9 multiplication tables up and down