動(dòng)態(tài)的9*9乘法表效果的實(shí)現(xiàn)代碼

更新時(shí)間：2016年05月16日 16:18:13 投稿：jingxian

下面小編就為大家?guī)硪黄獎(jiǎng)討B(tài)的9*9乘法表效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧

近日在群里看到有個(gè)題目，拿出來寫寫，

要求：

用html,css,原生js實(shí)現(xiàn)如圖的效果，先正向輸出，然后逆向回溯，最后停留在完整的畫面。

首先：

HTML部分代碼：

就是這么簡單一行搞定。

CSS代碼：

#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代碼也很簡單，span中的margin主要就是為了消除出現(xiàn)雙border的問題。

接下來重點(diǎn)來了

javascript代碼：

首先創(chuàng)建一個(gè)9*9乘法表的函數(shù)

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，新建一個(gè)用來放html代碼片段的空數(shù)組：

var html = [];

2，使用for循環(huán)遍歷出9*9乘法表格：

for(var i = 1;i <= 9;i++){
 for(var j = 1;j <= i;j++){
 //內(nèi)容
 } 
}

3，將循環(huán)內(nèi)容push進(jìn)之前新建的空數(shù)組：

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

4，注意為了實(shí)現(xiàn)階梯在j循環(huán)完畢之后添加一個(gè)換行字符：

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

5，最后記得return出剛剛那個(gè)數(shù)組：

return html;

創(chuàng)建9*9乘法表的函數(shù)就完成了。

接下來是將展示到頁面中：

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

我們依然是創(chuàng)建一個(gè)新的函數(shù):inHTML()

1，首先聲明一些初始化變量

var html = create(),//調(diào)用之前創(chuàng)建的9*9函數(shù)
  i = 0,//初始化變量i
  tmp = create(),
  timer = null,//初始化
  result = document.getElementById('result');//獲取id

2，接著我們創(chuàng)建一個(gè)定時(shí)器，讓數(shù)據(jù)依次展示：

timer = setInterval(function(){
 //內(nèi)容 
},100)

讓100毫秒執(zhí)行一次這個(gè)定時(shí)器

3，接著寫定時(shí)器中的內(nèi)容：

if(i > html.length){ //判斷i是否大于html.length，如果大于就逆向展示
 html.splice(html.length-1,1)
 result.innerHTML = html.join('');
}
else{ //如果小于就正向展示
 result.innerHTML += html[i++];
}
if(!html.length){ //判斷如果html.length為false時(shí)展示。
 result.innerHTML = tmp.join('');
 clearInterval(timer);//清除定時(shí)器
}

inHTML()函數(shù)也寫完了，那就剩下調(diào)用了