動的9*9乗算テーブル

最近グループでテーマを見て書きました
要件:
html,css,原生jsで図のような効果を実現し,まず順方向に出力し,その後逆方向に遡り,最後に完全な画面にとどまる.
まず、
HTML部分コード:
  
このように簡単に1行できます.
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は主にダブルborderの問題を解消するためです.
次はポイントです
JAvascriptコード:
まず9*9乗算テーブルの関数を作成します.

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、htmlコードクリップを配置するための空の配列を新規作成します.

var html = [];

2,forループを使用して9*9乗算テーブルを巡回する:

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

3、ループ内容pushを前に新しく作成した空の配列に入れます.

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

4,ステップを実現するためにjループが完了した後に改行文字を追加することに注意:

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

5、最後にreturnがさっきの配列を出したのを覚えています.

return html;

9*9乗算テーブルを作成する関数は完了します.
次に、ページに表示されます.

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

私たちは依然として新しい関数を作成しています:inHTML()
1、まず初期化変数を宣言します.

var html = create(),//       9*9  
      i = 0,//     i
      tmp = create(),
      timer = null,//   
      result = document.getElementById('result');//  id

2、次に、次のようにデータを順次表示するタイマを作成します.

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

100ミリ秒でこのタイマーを実行させます
3、タイマーの内容を書きます.

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   。
  result.innerHTML = tmp.join('');
  clearInterval(timer);//     
}

InHTML()関数も書き終わったら、あとは呼び出し

inHTML();

完了します.
みんなは自分で行ってみることができて、もっと良い考えがあって私に伝言をあげることができます.
DEMOプレゼンテーションアドレス:click me!
微信の公衆番号に注目して、先端の知識を理解することができます.
みんなの伝言の疎通を歓迎して、覚えていて軽くたたいてください!!!