JavaScript 練習 - 九九乘法表

Demo

JavaScript 練習 - 九九乘法表 - Demo

1. Introduction 介紹

這是 六角學院的一個小挑戰,使用 JavaScript for 迴圈獲取九九乘法表所有內容。

  • 使用 for 迴圈獲取九九成法表全部內容
  • 不能將數字直接寫在 HTML 上,必須用 JavaScript 渲染

2. 功能

1
2
3
4
5
6
7
8
9
10
<div class="wrap">
<div class="title">
<div class="content">
<div class="line"></div>
<h1 class="mainTitle">九九乘法表</h1>
<h2 class="secondTitle">MULTIPLICATION CHART</h2>
<div class="line"></div>
</div>
</div>
</div>

這個練習,用到的是最基本的 for LoopcreateElementsetAttribute 觀念。創造一個原本不在 HTML 結構裡的畫面。

  1. 使用雙迴圈獲得九九乘法表前後相乘的 2 個數字
  2. Document.createElement() 方法可以依指定的標籤名稱(tagName)建立 HTML 元素,
  3. Element.setAttribute(),設定元素的屬性值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var wrap = document.querySelector(".wrap");

function createChart() {
for (i = 2; i < 10; i++) {
const box = document.createElement("div");
box.setAttribute("class", "box");
wrap.appendChild(box);
const chart = document.createElement("ul");
chart.setAttribute("class", "chart");
box.appendChild(chart);
const title = document.createElement("li");
title.textContent = i;
title.setAttribute("class", "chart_title");
chart.appendChild(title);
for (let j = 1; j < 10; j++) {
const answer = i * j;
const list = document.createElement("li");
list.textContent = `${i}x${j}=${answer}`;
chart.appendChild(list);
}
}
}

createChart();

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 CYC'S BLOG All Rights Reserved.

UV : | PV :