The implementation code _javascript skill of dynamic 9*9 multiplication table effect

Recently in the group saw a problem, take out write,

Requirements:

With Html,css, the original JS to achieve the effect of the diagram, first forward output, and then reverse backtracking, and finally stay in the complete picture.

First of all:

HTML Section Code:

<div id= "result" ></div>

It's just this simple line.

CSS code:

#result {
 width:550px;
 margin:30px Auto;
 font-size:0;
 Font-family:consolas, "Liberation Mono", Menlo,courier,monospace;
}
#result span{
 Display:inline-block;
 width:60px;
 height:25px;
 line-height:25px;
 font-size:12px;
 Text-align:center;
 border:1px solid #eee;
 Margin: -1px 0 0-1px;

CSS code is also very simple, span of margin is mainly to eliminate the problem of double border.

The point is, then.

JavaScript code:

First, create a function of the 9*9 multiplication table

function Create () {
 var html = [];
 for (var i = 1;i <= 9;i++) {for
  (var j = 1;j <= i;j++) {
    html.push (' <span> ' +j+ ' * ' +i+ ' = ' + (j*i) + ' </ Span> ');
  }
   Html.push (' <br/> ');
 }
 return html;
}

1, create an empty array to put the HTML code fragment:

var html = [];

2, use a For loop to traverse out the 9*9 multiplication table:

for (var i = 1;i <= 9;i++) {for
 (var j = 1;j <= i;j++) {
 //content
 } 
}

3, the new empty array before the loop content is pushed into:

Html.push (' <span> ' +j+ ' * ' +i+ ' = ' + (j*i) + ' </span> ');

4, note in order to achieve the ladder after the J loop is complete add a newline character:

Html.push (' <br/> ');

5, and finally remember to return the array that was just that:

return HTML;

The function to create the 9*9 multiplication table is complete.

Next is the presentation to the page:

function inhtml () {
   var html = Create (),
    i = 0,
    tmp = Create (),
    timer = null, result
    = Document.getelem Entbyid (' result ');
   Timer = setinterval (function () {
    if (i > Html.length) {
     html.splice (html.length-1,1)
     result.innerhtml = Html.join (")";
    else{
     result.innerhtml + = html[i++];
    }
    if (!html.length) {
     result.innerhtml = Tmp.join (");
     Clearinterval (timer);
    }
   },100)
  }

We are still creating a new function: Inhtml ()

1, first declare some initialization variables

var html = Create (),//9*9 function created before calling
  i = 0,//initialization variable i
  tmp = Create (),
  timer = null,//initialization result
  = Documen T.getelementbyid (' result ');//Get ID

2, and then we create a timer and let the data show in turn:

Timer = setinterval (function () {
 //content 
},100)

Allow 100 milliseconds to execute this timer once

3, and then write the contents of the timer:

if (i > Html.length) {//Judge I is greater than html.length, if greater than the reverse display
 html.splice (html.length-1,1)
 result.innerhtml = Html.join (")";
else{//If less than the forward display
 result.innerhtml + = html[i++];
}
if (!html.length) {//Judge if Html.length is false.
 result.innerhtml = Tmp.join (");
 Clearinterval (timer);//Clear Timer
}

The inhtml () function is also written, leaving the call to the

Inhtml ();

Complete.

Everyone can go to their own to try, have a better idea can give me a message.

The above dynamic 9*9 multiplication table effect of the implementation code is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.