Implementation code for dynamic 9*9 multiplication table effect

Recently I saw a topic in the group and took it out and wrote it.

Require:

Use html, css, and native js to achieve the effect as shown in the figure, first output forward, then backtrack backward, and finally stay in the complete picture.

first:

HTML part code:

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

It's just that simple.

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

The CSS code is also very simple. The margin in the span is mainly to eliminate the problem of double borders.

The next key point is

javascript code:

First create a function with a 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 a new empty array to put html code snippets:

 var html = [];

2. Use a 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 into the empty array that was newly created:

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

4. Note that in order to implement the ladder, add a newline character after the j loop is completed:

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

5. Finally, remember to return the array just now:

 return html;

The function that creates a 9*9 multiplication table is completed.

Next is displayed on 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(),//Calling the 9*9 function i = 0,//Initialize the variable i tmp = create(), timer = null,//Initialize result = document.getElementById('result');//Get id

2. Then we create a timer to display the data in turn:

 timer = setInterval(function(){ //Content},100)

Let this timer be executed once in 100 milliseconds

3. Then write the contents in the timer:

 if(i > html.length){ //Judge whether i is greater than html.length. If it is greater than, display html.splice(html.length-1,1) result.innerHTML = html.join('');}else{ //If it is less than, display result.innerHTML += html[i++];}if(!html.length){ //Judge if html.length is false when display. result.innerHTML = tmp.join(''); clearInterval(timer);//Clear timer}

The inHTML() function has also been written, so the only thing left is to call it

 inHTML();

Finish.

You can try it yourself. If you have better ideas, please leave me a message.

The above dynamic implementation code of the 9*9 multiplication table effect is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.