# JS練習_2022新年倒數計時器

製作一個距離2022年一月一日的倒數計時器。
- 成品畫面
## 功能
- 觸碰標題會有藍光
- 打字動畫無限循環
- 時間倒數畫面呈現

## CSS
### body::after
在跟元素`body`後面利用`after`建立一層黑模，使畫面更有質感。

body::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, .3);
}

### body *
利用`z-index`使body內部所有東西都放到最上層。

body * {
    z-index: 1;
}

### text-shadow
利用屬性`text-shadow` 在 h1 被碰到的時候，會產生文字背影。

h1:hover{
    text-shadow: 0 0 10px #3498DB,
                0 0 20px #3498DB,
                0 0 30px #3498DB,
                0 0 40px #2980B9,
                0 0 70px #2980B9,
                0 0 80px #2980B9,
                0 0 100px #2980B9,
                0 0 150px #2980B9;
}

### 打字動畫
讓文字一個一個被打出來，可以利用css的`step()`還有`overflow`屬性。

#### step()
讓元素在畫面不連續，他會依照設定的影格格數切割動畫，不補入過度動畫。
- 語法
`step(格數, position(start/ end(可省略)))`
- number代表我們把動畫切了幾段
- position代表動畫是從時間 開頭連續 還是結尾連續，支持`start`或是 `end`這兩個屬性值。
- 
圖片來源: https://www.w3.org/TR/css-easing-1/#step-timing-functions
- start: 表示時間開始時，已經執行了一段了
- end: 默認值。表示時間開始，才會開始執行

#### overflow
定義元素超過某個範圍的時候該如何呈現。
常見屬性:
1. visible: 內容不會被修改，當超出元素的範圍時內容會呈現在元素框之外。
2. hidden: 內容會被修改，但不會顯示捲軸，當超出元素的範圍時會隱藏內容。
3. scroll: 內容會被修改，超出範圍自動變成捲軸方式呈現。
4. auto: 自動選擇由**瀏覽器**決定如何顯示(預設值)，當超出範圍時自動以捲軸方式呈現。
5. overflow-x: 可設定「水平」方向，當超出範圍時自動變成捲軸呈現方式。(需要內有寬度大於元素框的物件)
6. overflow-y: 可設定「垂直」方向，當超出範圍時自動變成捲軸呈現方式。

- [overflow 小科普](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow)

#### white-wrap
主要特性是決定如何處理元素內的空白字元，要是打字動畫打的內容長度過長，文字會被拆行。利用`white-wrap` 讓畫面只呈現一行。
- [white-wrap 小科普](https://developer.mozilla.org/zh-TW/docs/Web/CSS/white-space)

## JS
### remainTime()
- 先設定目前的時間變數，設定時間變數的方式是`new Date()`
- 取得剩餘的時間。將2022年一月一日與目前時間相減，得到剩餘時間(單位：毫秒)。
- 設定變數`day`、`hour`、`min`、`sec`，並用取餘數的方式，得到截至今日結束前的剩餘時間。
- 將剩餘時間放入html設定好的元素。

//創造變數，得知現在是幾年
const currentYear = new Date().getFullYear();
// console.log(currentYear);
//
const countDownTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);
//  console.log(countDownTime)
function remainTime(){
    const timeNow = new Date();
    // console.log(timeNow)
    const remain = countDownTime - timeNow;//得到的是毫秒
    // console.log(remain)
    //定義remain的剩下幾天幾時幾分幾秒

    const sec = Math.floor(remain/1000)%60;
    const min = Math.floor(remain/1000/60)%60;
    const hour = Math.floor(remain/1000/60/60)%24;
    const day = Math.floor(remain/1000/60/60/24);
    
    $('#days').text(timeExpress(day));
    $('#hours').text(timeExpress(hour));
    $('#minutes').text(timeExpress(min));
    $('#seconds').text(timeExpress(sec));
}

#### timeinterval
- 設定計時器，透過設定`setInterval`來==重複== 執行函式，設定延遲時間，在每間隔多久後再執行程式碼，最後並回傳一個timerID。
- 設定條件，要是剩餘時間已經 < 0，則呼叫`clearInterval()`以結束循環。

const timeinterval = setInterval(function(){
    var t = countDownTime - (new Date());
    // console.log(t)
    if(t<0){
        clearInterval(timeinterval);
    }else{
        remainTime()
    }
},1000);

###### tags: `javascript`