為了應景一下，自己扣出新年倒數的網頁啦！
利用工具
這次使用 HTML + CSS + JavaScript 的組合。
- HTML ： 控制字及煙火的表現
- CSS ： 負責美編（字的效果、煙火的顏色）
- JS ： 主要是倒數及內嵌 HTML
程式發想
倒數計時：到了 2021 01/01 00:00:00 就顯示 新年快樂 ，並且 放出煙火
程式實作
- 設定倒數終止時間
var countDownDate = new Date("Jan 1, 2021 00:00:00").getTime();
- 每一秒重新取得新內容 （單位：毫秒）
var x = setInterval(function() {
// 函式內容
}, 1000);
- 取得現在的時間 （使用者系統時間）
var now = new Date().getTime();
- 更新並顯示倒數時間
使用 innerHTML 屬性，將文字內嵌到指定 id 的容器
document.getElementById("time").innerHTML = "倒數 " + hours + " 小時 " + minutes + " 分鐘 " + seconds + " 秒 ";
- 時間到了，就停止計時
clearInterval(x);
document.getElementById("time").innerHTML = "新年快樂!";
- 與此同時放入煙火特效
document.getElementById("firework1").innerHTML = `!<--煙火特效-->`
- 修改煙火顏色 (紅色)
.explosion {
position: absolute;
left: -2px;
bottom: 0;
width: 4px;
height: 80px;
transform-origin: 50% 100%;
/* background-color: rgba(0,0,0,.2); */
overflow: hidden;
}
.red::before {
background-color: #f55252;
}
大概 joe 4 john 啦~ 希望今年我的 Web 功力能更好！