---
# System prepended metadata

title: 作業1 負評救星-當機等候網頁

---

# 作業1 負評救星-當機等候網頁
## **網站介紹**
https://store.steampowered.com/?l=tchinese
一個大型遊戲販賣網站

## **設計理念**
有一個倒數10秒之後會心載入的計時器，較能使使用者不會著急。

## HTML

```
<!DOCTYPE html>
<html>
<head>
    <title>網站正在進行維護</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text">
    <h1>目前正在嘗試連線</h1>
    <p>很抱歉，請稍等或稍後再次訪問。</p>
    <p>我們將盡快恢復正常運作，感謝您的耐心等待。</p>
    <p id="countdown">10秒後重新載入</p>
</div>
<script src="script.js"></script>
</body>
</html>
```
## CSS
```
body {
    background-color: #000000;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background-image: url('steamim.png');
    background-size: cover;
}

.text {
    position: fixed;
    bottom: 350px;
    right: 800px;
    padding: 20px;
    font-size: 18px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
}

h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

p {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.countdown {
    display: inline-block;
    border: 2px solid #333;
    padding: 20px;
    font-size: 24px;
    margin-top: 30px;
}

#countdown {
    font-weight: bold;
}

```
## JavaScript

設一個叫countdown的變數存倒數時間，秒數到了之後換成載入中

```
    var countDown = 10;
    var countdownEl = document.getElementById("countdown");
    var countdownInterval = setInterval(function() {
        if (countDown > 0) {
        countdownEl.innerHTML =  + countDown + " 秒" + " 重新載入";
        countDown--;
        } else {
        clearInterval(countdownInterval);
        countdownEl.innerHTML = "載入中";
        }
    }, 1000);

```