<h1>OA HTML課程</h1>
[1. 我的個人網站（一）](#one)
[2. 我的個人網站（二）](#two)
[3. 我的個人網站（三）](#three)
[4. 我是誰產生器](#four)
[5. 彩色時鐘](#fiv)
[6. BMI計算機](#six)
[7. 抽獎抽籤神器](#seven)
[8. 實用計算機](#eight)
[9. 匯率計算機](#nine)
[10. 井字遊戲](#ten)
[11. 1 to 50](#eleven)
[12. 反應大考驗](#twelve)
[13. 數字炸彈](#thirteen)
[14. 英文炸彈](#fourteen)
[15. Emoji配對大作戰](#fifteen)
<hr>
<h2 id="one">
1. 我的個人網站（一）
</h2>
<p>
基本上就是學生們自己做自己的，每個人的內容都不太一樣，主要教學的內容是：
* 標題與水平線<br>
* 段落與換行<br>
* 圖片<br>
* 連結<br>
* 列表<br>
* 表格<br>
* 插入Youtube影片 (做到這裡的時候要注意學生有沒有自己跑去看影片)<br>
</p>
<hr>
<h2 id="two">
2. 我的個人網站（二）
</h2>
<p>
基本上就是學生們自己做自己的，每個人的內容都不太一樣，主要教學的內容是：
* CSS 樣式規則<br>
* 選擇器<br>
* 選擇器複習 - 1<br>
* 選擇器練習 - 2<br>
* 選擇器練習 - 3<br>
* 線上網頁學習平台<br>
* 文字與色碼<br>
* 字體<br>
* 背景<br>
</p>
<hr>
<h2 id="three">
3. 我的個人網站（三）
</h2>
<p>
基本上就是學生們自己做自己的，每個人的內容都不太一樣，主要教學的內容是：
*認識盒子(box)<br>
* 加上邊框<br>
* 調整表格<br>
* 將表格上色<br>
* 認識 JQuery，讓網頁“動”起來<br>
* 匯入 jQuery <small>(小孩通常在這邊會卡住，他們不知道怎麼匯入)</small><br>
* jQuery - 選擇器、事件、效果<br>
* 段落顯示與隱藏<br>
</p>
<hr>
<h2 id="four">
4. 我是誰產生器
</h2>
<h4>
HTML
</h4>
```htmlmixed=
<html>
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1 class="js-result">???</h1>
<button class="js-btn">我是誰？</button>
</div>
</body>
</html>
```
<h4>
CSS
</h4>
```css=
.body{
background-color: blue;
background-image: url('bg.jpg');
/*background-repeat: no-repeat;
background-size: cover;
position: fixed;*/
width: 100vw;
height: 100vh;
}
div {
width: 40%;
position: relative;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
}
h1 {
text-align: center;
font-size: 60px;
color: #fff;
}
button {
width: 100%;
background-color: #dc3545;
color: #fff;
font-size: 30px;
padding: 10px;
border: 0px;
border-radius: 15px;
}
```
<h4>
JavaScript
</h4>
```javascript=
var places = ['台南', '高雄', '屏東', '嘉義', '雲林', '台中', '彰化', '新竹', '桃園', '台北', '新北', '宜蘭', '花蓮']
var stars = ['金城武','劉德華','周杰倫','蔡依林','新垣結依','宋仲基','鄭容和','蕭敬騰','五月天','池昌旭','魔力紅'];
$('.js-btn').click(showMyName);
function showMyName(){
var rand1 = Math.floor(Math.random()*places.length);
var rand2 = Math.floor(Math.random()*stars.length);
console.log(rand1);
console.log(rand2);
$('.js-result').text(places[rand1] + stars[rand2])
}
```
<hr>
<h2 id="five">
5. 彩色時鐘
</h2>
<h4>HTML</h4>
<p>
原始程式碼即可
</p>
<h4>CSS</h4>
```css=
body {
background-color: black;
width: 100vw;
height: 100vh;
}
h1 {
font-size: 50px;
}
h1, h2 {
color: white;
text-align: center;
font-weight: bold;
font-family: Monospace;
margin: 0;
text-shadow: 3px 3px 15px white;
}
div {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle {
width: 300px;
height: 300px;
border: 5px solid white;
border-radius: 50%;
box-shadow: 3px 3px 15px white;
}
```
<h4>JS</h4>
```javascript=
setInterval(getTime, 1000);
function getTime() {
var d = new Date();
var arr = d.toString().split(' ');
$('#time').text(arr[4]);
$('#date').text(arr[1] + " " + arr[2] + ", " +arr[3]);
if (d.getSeconds() == 0) {
var r = Math.floor(Math.random()*255);
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
var color = "rgb(" + r + "," + g + "," + b + ")"
$('body').css('background-color', color);
}
}
```
<hr>
<h2 id="six">
6. BMI計算機
</h2>
<h4>HTML</h4>
<h4>CSS</h4>
```css=
body {
text-align: center;
padding: 60px;
}
img {
height: 200px;
}
input {
width: 50%;
font-size: 16px;
padding: 10px;
margin: 10px;
border: 2px solid #ddd;
border-radius: 5px;
}
button {
width: 50%;
font-size: 16px;
padding: 10px;
margin: 10px;
border: 2px solid #ddd;
border-radius: 5px;
color: #fff;
background-color: red;
}
```
<h4>JS</h4>
```javascript=
$('#img-slim').hide();
$('#img-normal').hide();
$('#img-fat').hide();
$('#btn-start').on('click', getResult);
var text;
function getResult(){
$('img').hide();
var h = $('#input1').val();
var w = $('#input2').val();
h = parseFloat(h/100);
w = parseFloat(w);
var bmi = w/(h*h);
bmi = bmi.toFixed(2);
$('#result').text("計算結果：" + bmi);
if (bmi <= 18.5) {
text = '太輕了';
$('#img-slim').show();
}else if (bmi > 18.5 && bmi <= 24.9) {
text = '正常';
$('#img-normal').show();
}else if (bmi > 24.9) {
text = '太重了';
$('#img-fat').show();
}
}
```
<hr>
<h2 id="seven">
7. 抽獎抽籤神器
</h2>
<h4>HTML</h4>
<p>
原始程式碼即可
</p>
<h4>CSS</h4>
```css=
body {
padding: 60px;
text-align: center;
}
img {
height: 200px;
}
textarea {
width: 50%;
min-height: 100px;
margin: 30px auto;
padding: 30px;
font-size: 30px;
border: 2px solid #FFdd22;
border-radius: 30px;
display: block;
}
button {
width: 50%;
height: auto;
margin: 30px auto;
font-size: 30px;
border-radius: 30px;
background-color: red;
color: #fff;
display: block;
cursor: pointe;
}
```
<h4>JS</h4>
```javascript=
$('#shake').hide();
$('#start').on("click", getResule);
function getResule() {
var content = $('#textarea').val();
var option = content.split('\n');
console.log(option);
var rand = Math.floor(Math.random()*option.length);
console.log(option[rand]);
$('#ok').hide();
$('#shake').show();
$('#result').text('Waiting...');
setTimeout(function() {
$('#ok').show();
$('#shake').hide();
$('#result').text(option[rand]);
}, 3000);
}
```
<hr>
<h2 id="eight">
8. 實用計算機
</h2>
<h4>HTML</h4>
<p>
預設
</p>
<h4>CSS</h4>
```css=
body {
background-color: black;
text-align: center;
padding: 100px;
}
#app {
width: 300px;
height: 400px;
/*可使margin自動抓一半，但需要有設定此元件大小*/
margin: auto;
}
p {
color: #fff;
text-align: right;
font-size: 40px;
height: 60px;
padding: 5px;
margin: 5px;
}
button {
/* 一顆按鈕：寬70px + 邊寬5px = 75px */
/* 一排按鈕：75px * 4 = 300px */
width: 70px;
height: 70px;
border-width: 5px;
border-radius: 50%;
border-color: black;
color: #fff;
font-size: 20px;
/* 去除點擊時外圍的藍色框框，與border不同處於outline，border並不佔空間 */
/* outline: none; */
}
button:active {
transform: scale(0.9, 0.9);
}
/* 以上為預設程式碼 */
```
<h4>JS</h4>
```javascript=
$('button').click(getChar);
function getChar(){
var char = $(this).text();
console.log(char);
var screen_text = $('p').text();
if(char == "C"){
screen_text = '';
}
else if(char == "del"){
screen_text = screen_text.slice(0, screen_text.length-1);
}
else if(char == "="){
try{
screen_text = eval(screen_text);
}catch(e){
screen_text = "Error";
}
}
else{
screen_text += char;
}
$('p').text(screen_text);
}
```
<hr>
<h2 id="nine">
9. 匯率計算機
</h2>
<h4>HTML</h4>
<p>
預設
</p>
<h4>CSS</h4>
<p>
css的地方我偷懶了，沒有做完ＸＤＤ
</p>
<h4>JS</h4>
```javascript=
// 按鈕觸發
/*$('#ntd-btn').click(ntd_to_else);
$('#jpy-btn').click(jpy_to_else);
$('#usd-btn').click(usd_to_else);*/
$('#ntd').keydown(ntd_to_else);
$('#jpy').keydown(jpy_to_else);
$('#usd').keydown(usd_to_else);
// 功能
function ntd_to_else () {
var ntd = $('#ntd').val();
var jpy = (ntd/0.293).toFixed(3);
var usd = (ntd/31.365).toFixed(3);
$('#jpy').val(jpy);
$('#usd').val(usd);
}
function jpy_to_else () {
var jpy = $('#jpy').val();
var ntd = (jpy*0.2802).toFixed(3);
var usd = (ntd/31.365).toFixed(3);
$('#ntd').val(ntd);
$('#usd').val(usd);
}
function usd_to_else () {
var usd = $('#usd').val();
var ntd = (usd*30.695);
var jpy = (ntd/0.293);
$('#jpy').val(jpy.toFixed(3));
$('#ntd').val(ntd.toFixed(3));
}
```
<hr>
<h2 id="ten">
10. 井字遊戲
</h2>
<h4>HTML</h4>
<p>
記得把預設的ooxx刪掉即可
</p>
<h4>CSS</h4>
<p>
要再確認一下原始程式碼有哪些
</p>
<h4>JS</h4>
```javascript=
var current='O';
$('.grid div').click(place);
$('button').click(restart);
function place(){
$(this).text(current);
if(current=='O')
{
current=='X';
$(this).removeClass('grad');
$(this).addClass('orange');
}
else
{
current='O';
$(this).removeClass('grad');
$(this).addClass('red');
}
var a = $('#a').text();
var b = $('#b').text();
var c = $('#c').text();
var d = $('#d').text();
var e = $('#e').text();
var f = $('#f').text();
var g = $('#g').text();
var h = $('#h').text();
var i = $('#i').text();
var j = $('#j').text();
check(a, b, c);
check(d, e, f);
check(g, h, i);
check(a, d, g);
check(b, e, h);
check(c, f, i);
check(a, e, i);
check(c, g, e);
}
function check(x, y, z){
if(x == y && y == z && x != '')
{
$('h1').text('vactory');
}
}
function restart(){
$('h1').text('more gaame');
$('.grid div').text('');
$('.grid div').removeClass('orange');
$('.grid div').removeClass('red');
$('.grid div').addClass('grad');
}
```
<hr>
<h2 id="eleven">
11. 1 to 50
</h2>
<h4>HTML</h4>
<p>
預設
</p>
<h4>CSS</h4>
<p>
預設
</p>
<h4>JS</h4>
```javascript=
var cards = $('.card');
var count = 1;
var startTime = Date.now();
for (var i = 0; i < 25; i++) {
var rand1 = Math.floor(Math.random()*25);
var rand2 = Math.floor(Math.random()*25);
var tmp = $(cards[rand2]).text();
$(cards[rand2]).text($(cards[rand1]).text());
$(cards[rand1]).text(tmp);
}
//console.log(cards[1]);
$('.card').on("click", check);
function check() {
var num = Number($(this).text());
//console.log(num);
if (count == num && num <= 25) {
$(this).text(num+25);
count ++;
}
if (count == num && num > 25) {
$(this).addClass("hide");
count ++;
}
if (count == 51) {
//$(cards).css('visibility', 'visible');
$(cards).removeClass("hide");
$(cards).css('backgroundColor', 'gold');
$(cards).text('');
var endTime = Date.now();
time = (endTime - startTime)/1000;
$(cards[11]).text("結果");
$(cards[12]).text(time);
$(cards[13]).text("秒");
}
console.log(count);
}
```
<hr>
<h2 id="twelve">
12. 反應大考驗
</h2>
<h4>HTML</h4>
<p>
預設
</p>
<h4>CSS</h4>
<p>
預設
</p>
<h4>JS</h4>
```javascript=
var status = "blue";
var id;
var startTime;
var best = Infinity;
$('body').on("click", function() {
if (status == "blue") {
Start();
} else if (status == "red") {
tooSoon();
} else {
showResult();
}
})
function Start() {
$('h1').text("Waiting for Green...");
$('h2').text("");
$('body').css("background-color", "red");
status = "red";
var time = Math.random()*10000;
console.log(time);
id = setTimeout(timeOut, time);
}
function timeOut() {
$('h1').text("Click!");
$('h2').text("");
$('body').css("background-color", "green");
status = "green";
startTime = Date.now();
}
function tooSoon() {
$('h1').text("Too fast!!");
$('h2').text("Click to restart.");
$('body').css("background-color", "royablue");
status = "blue";
clearTimeout(id);
}
function showResult() {
// $('h1').text("_ms");
$('h2').text("");
$('body').css("background-color", "green");
status = "blue";
var time = Date.now() - startTime;
$('h1').text(time + "ms");
if (time < best)
best = time;
$('h3').text("最佳分數：" + best + "ms");
}
```
<hr>
<h2 id="thirteen">
13. 算術炸彈
</h2>
<h4>HTML</h4>
<p>
預設
</p>
<h4>CSS</h4>
<p>
預設
</p>
<h4>JS</h4>
```javascript=
var level = 0;
var correct = true;
var timer = 0;
var add = true;
start();
function start() {
var ans = 0;
level ++;
$('#level').text("level: " + level);
var x = Math.floor(Math.random()*10);
var y = Math.floor(Math.random()*10);
add = Math.random() > 0.5;
if (add) {
ans = x + y;
correct = Math.random() > 0.5;
if (correct == false) {
ans += Math.ceil(Math.random()*5);
}
$('#formula').text(x + "+" + y + "=" + ans);
} else {
ans = x - y;
correct = Math.random() > 0.5;
if (correct == false) {
ans += Math.ceil(Math.random()*5);
}
$('#formula').text(x + "-" + y + "=" + ans);
}
timer = 0;
}
function gameover() {
$("button").hide();
$('#gameover').show();
clearInterval(id);
}
$('#btn-yes').click(function() {
if (correct)
start();
else
gameover();
});
$('#btn-no').click(function() {
if (!correct)
start();
else
gameover();
});
var id = setInterval(function() {
timer += 0.1;
//console.log(timer);
$("#bar").css("width", timer+"%");
if (timer > 100)
gameover();
}, 1);
// 創造一個函式指令 hello：
function hello () {
// 讓網頁跳出文字訊息：
alert('叩叮：\n嗨你好～ 讓我們一起加油寫出漂漂亮亮的網頁唄！');
}
```
<hr>
<h2 id="fourteen">
14. 英文單字王
</h2>
<h4>HTML</h4>
<p>
預設
</p>
<h4>CSS</h4>
<p>
預設
</p>
<h4>JS</h4>
```javascript=
var answer;
var answerBtn; // 儲存正確答案的按鈕
var points = 0;
// 預設執行產生題目
question();
// 點擊下一題按鈕產生題目
$('#next').click(question);
// 產生題目
function question () {
$('#next').hide();
$('#a, #b, #c, #d').removeClass("red green");
$('#a, #b, #c, #d').addClass("blue");
var a = randomWord();
var b = randomWord();
var c = randomWord();
var d = randomWord();
$('#a').text(a.zh);
$('#b').text(b.zh);
$('#c').text(c.zh);
$('#d').text(d.zh);
var rand = Math.random()*4;
if (rand < 1) {
answer = a;
answerBtn = $("#a");
} else if (rand < 2) {
answer = b;
answerBtn = $("#b");
} else if (rand < 3) {
answer = c;
answerBtn = $("#c");
} else {
answer = d;
answerBtn = $("#d");
}
$('h2').text(answer.en);
}
function randomWord () {
var ran = Math.floor(Math.random() * dict.length);
return dict[ran];
}
$('#a, #b, #c, #d').click(function() {
if ($(this).text() != answer.zh) {
$(this).removeClass("blue");
$(this).addClass("red");
points = 0;
} else {
points += 1;
}
answerBtn.removeClass("blue");
answerBtn.addClass("green");
$('#next').show();
$("h1").text("連續答對 " + points + " 題")
})
```
<hr>
<h2 id="fifteen">
15. Emoji配對大作戰
</h2>
<h4>HTML</h4>
<p>
預設
</p>
<h4>CSS</h4>
<p>
預設
</p>
<h4>JS</h4>
```javascript=
// 選擇相對emoji放入陣列
var answers = [
'🧣', '🎩', '🧢', '👒', '🎓', '⛑', '👑', '👝',
'🧣', '🎩', '🧢', '👒', '🎓', '⛑', '👑', '👝'
];
var first;
var second;
var firstEl;
var secondEl;
var firstIn;
var secondIn;
var lock = false;
var count = 0;
for (var i = 0; i < 20; i++) {
var rand1 = Math.floor(Math.random()*16);
var rand2 = Math.floor(Math.random()*16);
var tmp = answers[rand1];
answers[rand1] = answers[rand2];
answers[rand2] = tmp;
}
$('button').click(function () {
secondIn = $(this).data('index');
if (firstIn != secondIn) {
$('h1').text("翻開" + ++count + "次");
if (!lock) {
if (first == undefined) {
first = answers[$(this).data('index')];
$(this).text(first);
firstEl = $(this);
firstIn = $(this).data('index');
} else if (second == undefined) {
second = answers[$(this).data('index')];
console.log(firstIn);
console.log(secondIn);
$(this).text(second);
secondEl = $(this);
if (first != second) {
lock = true;
setTimeout(function() {
firstEl.text("❓");
secondEl.text("❓");
lock = false;
}, 1000);
}
first = undefined;
second = undefined;
}
}
}
});
```
<hr>
Sign in with Wallet
Connect another wallet