---
tags: HW2
---

<h1 style="text-align:center;">
CP113-B-HW2
</h1>

<h4>
作業相關附件與繳交處
</h4>

###### 請<span style="color:red;"><b>直接</b></span>下載，並在對應的作答區作答。

[HW2](https://drive.google.com/file/d/1vtsXBX2iu3Ept_ghZWsO2igrkyHERcwS/view?usp=sharing)
[HW2-作業繳交處](https://docs.google.com/forms/d/e/1FAIpQLSei2j9RzwZZnxJFnpxO1yCvjFZWpsy0aD0I3MjM8WnfvyIbTg/viewform?usp=sf_link)

:::warning
<h6>
時間：03/25 23：59 逾時不候
</h6>
:::

:::info
<h6>
作業繳交 ( 一個 html 檔案，不需要壓縮，檔名為學號 [只需要數字的部分])
<br>
如要多次繳交檔案命名方式為
<br>
<span style="color:red;"><b>學號_版本</b></span>，Ex.1086215_2.html
</h6>
<h6>
有問題請寄信至 [e-mail]，請<span style="color:red;"> 勿 </span>用 Portal 發信
<br>
若繳交時被GOOGLE拒絕，通常是你有 <span style="color:red;">"多重"</span> 的副檔名 Ex. 1086215.html.html
</h6>
:::

<h4>
相關評分與要求
</h4>

<h5>Part1 ( 60% ) </h5>

1. 只使用 <span style="color:red;"><b>JavaScript</b></span> 建立一個 九九乘法表。
* ( 5% ) 需要有 **標題 ( caption DOM )** 為 九九乘法表
* ( 10% ) table DOM 結構為 **(thead，tbody 結構)** ，thead 內容為 **標題數字**，並為 **1~9**
* ( 30% ) tbody 內容顯示為 **被乘數 x 乘數 = 積數** Ex. 9 x 5 = 45
* ( 5% ) 填充**全**畫面，且**每個**colume字**置中**
* ( 10% ) 對於 **6 的倍數** 的積數，改顯示為自己的學號

<h5>Part2 ( 40% ) </h5>

接續第一題，利用第一題的 <span style="color:red;"><b>JavaScript</b></span> 加以修改

1. ( 30% ) 對於以下的條件加上特定的 class 並符合要求顯示在畫面上
* ( 15% ) 對於 **15的倍數** <span style="color:red;">或是</span> **18的倍數** 套上 **class：fifty_eig_times**
* ( 15% ) 對於積數是 **質數** <span style="color:red;">或是</span> **12的倍數** 的套上 **class：is_Prime_twl anima**
(此為雙 class name)

2. ( 10% ) fifty_eig_times / is_Prime_twl 的 css，的指定樣式，請自行寫作，並套用至 九九乘法表 中。

<h6>
&emsp;&emsp;&emsp;( 5% ) fifty_eig_times (每達成一個 => 1 / 3 / 5 )
<br><br>
&emsp;&emsp;&emsp;&emsp;&emsp;1. 背景色為 lightyellow<br>
&emsp;&emsp;&emsp;&emsp;&emsp;2. 粗體<br>
&emsp;&emsp;&emsp;&emsp;&emsp;3. 紅字
</h6>

<h6>
&emsp;&emsp;&emsp;( 5% ) is_Prime_twl (每達成一個 => 1 / 3 / 5 )
<br><br>
&emsp;&emsp;&emsp;&emsp;&emsp;1. 刪除線<br>
&emsp;&emsp;&emsp;&emsp;&emsp;2. 大小 20px<br>
&emsp;&emsp;&emsp;&emsp;&emsp;3. 字距間隔(letter-spacing)：3px
</h6>

<h6 style="color:red;">
Ps. 若 table 非 JS 自動生成，而是自己寫 HTML，總分將打8折。
</h6>

<h4>提供代碼，請自行加入對的地方 ( 一定會用到 )</h4>

/* for css */

* {
	    font-family: consolas, 'Microsoft JhengHei';
}

#container {
	    width: calc(100vw - 16px);
	    height: calc(100vh - 16px);
	}

#container > table {
	    width: 100%;
	    height: 80%;
	}
    
.anima {
	    animation: shiny 0.5s infinite;
	}

@keyframes shiny {
	0% {
	    background: red;
	}
	25% {
	    background: orange;
	}
	50% {
	    background: greenyellow;
	}
	75% {
	    background: skyblue;
	}
	100% {
	    background: blue;
            color: whitesmoke;
	}
    }
    

// for javascript
// 質數判斷
// 使用時需帶入判斷值
// 返回結果為布林值 true / false
function is_Prime(n) {
		var p;
		if (n == 1) {
			return false;
		}
		for (p = 2; p < n; p++) {
			if (n % p == 0) {
				return false;
			}
		}
		return true;
	}
--------------------------------------------
//Example

if (is_Prime(3)) {
    console.log(true)
} else {
    console.log(false)
}

<h4>結果展示 ( 點擊圖片可放大 )</h4>

[](https://i.imgur.com/0K8xoVK.gif)

<h4>
知識補充
</h4>

1. [關於 CSS3 的 "新" 尺度單位：vw、vh、vmin、vmax](https://blog.csdn.net/qq_43248623/article/details/108255014?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242)
2. [CSS Animations](https://www.w3schools.com/css/css3_animations.asp)