【JavaScript】JS地下城-1F-9×9乘法表

1F-9×9乘法表

連結

Demo

Code

使用語言

HTML、CSS、JavaScript

BOSS 弱點

  1. 【特定技術】需使用 JS for 迴圈技巧,裡頭數字不能直接寫在 HTML 上,需使用 JS 印出。
  2. 需使用 HTML、CSS、JS 技術
  3. 介面需與設計稿一致

技巧

function getNum(){
  var str = '';
  //第一個for迴圈-當前數字
  for (var i = 2; i < 10; i++) {
    str += '<div class="card">';
    str += '<ul>';
    str += '<li class="big-num">'+i+'</li>';
    //第二個for迴圈-要乘上的數字
    for (var a = 1; a < 10; a++) {
      str += '<li>'+i+' x '+a+' = '+(i*a)+'</li>';
    }
    str += '</ul>';
    str += '</div>';
  }
  //用insertAdjacentHTML插入str,
  //beforeend指定插入位置在元素結束前子元素結束後
  document.getElementById('wrap').insertAdjacentHTML('beforeend',str);
}
getNum();

關於 insertAdjacentHTML

可以在不刪除子元素的狀態下,像 innerHTML 一樣插入內容

語法

element.insertAdjacentHTML(position, text)

指定 position 位置

<!-- beforebegin -->
<element>
  <!-- afterbegin -->
  <child>Text</child>
  <!-- beforeend -->
</element>
<!-- afterend -->

追加:如果想要清空元素

如果想要清空元素,比起 innerHTML ,用 textContent 的方法就效能上來說比較好。

document.getElementById('foo').textContent = '';

追加:如果想要插入HTML元素 insertAdjacentElement

如果想要插入元素而不是字串的時候,也有一個東西叫insertAdjacentElement

使用方法基本上跟 insertAdjacentHTML 一樣。

var contentBlock = document.getElementById('contentBlock'), 
var insetElement = document.createElement('b');

insetElement.textContent = 'Test:';

contentBlock.insertAdjacentElement('afterbegin', insetElement);

參考資料

innerHTML より insertAdjacentHTML を使う