---
# System prepended metadata

title: OA HTML課程

---

<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>