# 作業3 詐欺遊戲-釣魚網站

## 教學說明

### 倒數計時器
{%youtube W_5ER5hxGUA %}
#### JavaScript

$(function(){
    countTime();
});
function countTime(){
    var $el = $('#time__count'),
        time = 900;
    var interval = setInterval(function () {
        time--;
        var min = parseInt(time / 60),
            sec = time % 60;
        min = min < 10 ? '0' + min.toString() : min.toString();
        sec = sec < 10 ? '0' + sec.toString() : sec.toString();
        $el.text(min + ':' + sec);
        if (time <= 0) {
            $(".time_end").show();
            $(".time__box").hide();
            $('.time_end').find('span').html("此筆訂單已逾時，無法進行交易，請返回商店重新結帳");
            $('#time__count').html('00:00');
            //time = 5;
            //var $btn = $('#w01').find('.actionArea >.btn');
            //$btn.removeAttr('data-fancybox');
            //$btn.removeAttr('data-src');
            //$btn.attr('disabled', true);
            //$btn.css({ 'opacity': '.65', 'cursor':'not-allowed'});
            //$btn.click(function () {
            //    return false;
            //    //$(this).remove();
            //    //$('.time_end').html("此筆訂單已逾時，無法進行交易，請返回商店重新結帳");
            //})  
            //$btn.click(function () {         
                //$(this).remove();
                //$('.time_end').html("此筆訂單已逾時，無法進行交易，請返回商店重新結帳");
            //})  
            clearInterval(interval);
        }
    }, 1000);   
  }

> 網頁中的倒數計時器以 index.js 這個檔案來實作。
這段 JavaScript 程式碼負責設置並顯示倒數計時器，設置時間為 15 分鐘（即 900 秒）。在倒數計時期間，它會以每秒 1 次的速度更新時間，並在計時結束後顯示訂單已逾時的訊息。
>
> 程式碼說明：
>
> 1. 在網頁加載完成後，執行 countTime() 函數。
> 2. countTime() 函數設置計時器的初始值為 900（即 15 分鐘），然後每秒更新一次倒數計時器的值。
> 3. 在更新倒數計時器的值時，函數會檢查是否已經超過計時器的時間，如果是，則停止計時器，顯示訂單已逾時的訊息。
> 4. 在計時器結束後，它會停止計時器並清除 interval 變數，以避免計時器繼續運行。
> 5. 計時器結束後，會顯示一條訊息，指出此筆訂單已逾時，無法進行交易，並提示用戶返回商店重新結帳。

---

### 卡號輸入動畫
{%youtube AkuoUM32-iA %}
#### JavaScript

// 獲取信用卡卡號輸入框元素
const cardNumberInput = document.querySelector("#card-number-input");

// 當卡號輸入框的內容發生改變時，更新圖片上的卡號
cardNumberInput.addEventListener("keyup", function(event) {
  // 獲取卡號輸入框中的值
  const cardNumber = event.target.value;

  // 獲取卡號圖片元素
  const cardImage = document.querySelector(".card-image");

  // 在卡號圖片上顯示卡號
  cardImage.textContent = cardNumber;
});

> 程式碼說明：
>
> 獲取了信用卡卡號輸入框的元素，然後添加了一個事件監聽器來監聽 keyup 事件。當使用者在信用卡卡號輸入框中輸入卡號時，keyup 事件會觸發。在事件處理函數中，獲取輸入框中的卡號值，然後獲取卡號圖片元素，並在卡號圖片上顯示卡號。

---

### 卡片翻轉動畫
{%youtube V1Bl1JoykWg %}
#### CSS

.card {
  /* 定義卡片樣式 */
  position: relative;
  width: 400px;
  height: 250px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.card:focus {
  /* 定義卡片翻轉樣式 */
  transform: rotateY(180deg);
}

.card-front, .card-back {
  /* 定義卡片正面和背面樣式 */
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  /* 定義卡片正面內容樣式 */
}

.card-back {
  /* 定義卡片背面內容樣式 */
  transform: rotateY(180deg);
}

#### JavaScript

// 獲取信用卡卡號輸入框元素和卡片檢查碼輸入框元素
const cardNumberInput = document.querySelector("#card-number-input");
const cardCvcInput = document.querySelector("#card-cvc-input");

// 為信用卡卡號輸入框元素和卡片檢查碼輸入框元素綁定 focus 事件和 blur 事件
cardNumberInput.addEventListener("focus", function() {
  document.querySelector("#card").classList.add("focus");
});

cardNumberInput.addEventListener("blur", function() {
  document.querySelector("#card").classList.remove("focus");
});

cardCvcInput.addEventListener("focus", function() {
  document.querySelector("#card").classList.add("focus");
});

cardCvcInput.addEventListener("blur", function() {
  document.querySelector("#card").classList.remove("focus");
});

> 程式碼說明：
> 卡片翻轉動畫是使用 CSS3 的 transform 屬性實現的。當使用者在信用卡卡號輸入框或卡片檢查碼輸入框中點擊時，將會觸發 focus 事件，此時 JavaScript 會為卡片元素添加 focus class，該 class 中定義了 transform: rotateY(180deg) 的樣式，使卡片元素繞 Y 軸翻轉 180 度。當使用者離開輸入框時，將會觸發 blur 事件，此時 JavaScript 會刪除卡片元素的 focus class，卡片就會恢復原本的樣式。

## 自評自己的網站跟目標網站的差異
### 自己的網站

### 目標的網站

我認為差異並不大，主要差異在於我的網站不會儲存使用者所輸入的資料。