Code and multiplication of dynamic 9*9 multiplication table Effects

Code and multiplication of dynamic 9*9 multiplication table Effects

I recently saw a question in the group and wrote it out,

Requirements:

The effect achieved by using html, css, and Native js is first output, followed by Reverse backtracking, and finally stuck on the complete screen.

First:

Some HTML code:

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

It's just a 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. The margin in span is mainly used to eliminate the problem of dual border.

Next we will focus on

Javascript code:

First, create a 9*9 multiplication table function.

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 for html code snippets:

var html = [];

2. Use the for loop to traverse the 9*9 multiplication table:

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

3. push the loop content to the new empty array:

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

4. Add a line feed character after the j loop is completed to implement the step:

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

5. Remember to return the array:

return html;

Create the 9*9 multiplication table function.

The following figure shows the page:

function inHTML(){   var html = create(),    i = 0,    tmp = create(),    timer = null,    result = document.getElementById('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 (), // call the previously created 9*9 function I = 0, // initialize the variable I tmp = create (), timer = null, // initialize result = document. getElementById ('result'); // get the id

2. Create a timer to display the data in sequence:

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

Let the timer be executed once in 100 milliseconds

3. Then write the content in the Timer:

If (I> html. length) {// determine whether I is greater than html. length. If the value is greater than, html is displayed in reverse order. splice (html. length-1, 1) result. innerHTML = html. join ('');} else {// if the value is smaller than, the result is displayed in a forward direction. innerHTML + = html [I ++];} if (! Html. length) {// determines if html. length is displayed if it is set to false. Result. innerHTML = tmp. join (''); clearInterval (timer); // clear the timer}

The inHTML () function is also completed, so the call is left.

inHTML();

Complete.

You can try it on your own and leave me a message if you have any better ideas.

The above dynamic 9*9 multiplication table effect implementation code is all the content shared by the small Editor. I hope you can give us a reference, and hope you can provide more support to the customer's house.