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.