# 作業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); ```