Javascript is required

May 8, 2019

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

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

1F-9×9乘法表

wp-image-176

連結

Demo

Code

使用語言

HTML、CSS、JavaScript

BOSS 弱點

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

技巧

function getNum() {
  let str = ''
  // 第一個for迴圈-當前數字
  for (let i = 2; i < 10; i++) {
    str += '<div class="card">'
    str += '<ul>'
    str += `<li class="big-num">${i}</li>`
    // 第二個for迴圈-要乘上的數字
    for (let 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 一樣。

const contentBlock = document.getElementById('contentBlock')
const insetElement = document.createElement('b')

insetElement.textContent = 'Test:'

contentBlock.insertAdjacentElement('afterbegin', insetElement)

參考資料

innerHTML より insertAdjacentHTML を使う

Tags