幫前一篇做的時鐘版面加上 CSS 美化～

前情提要，本篇講述這篇文後續美化！
JavaScript實作練習 part.3-1

這兩篇文更新間隔有點久，因為工作忙再加上不斷學新的技術，追線上課程的進度 QQ

還有我一直卡關過不去，在想我每張截圖的時間都不是同一天，而且我美化後的程式其實跟原本的差超多怎麼辦．．．

後來覺得算了，我就是分很多天擠出一篇文章的，所以文章截圖的時間本來就不同天喔！

完成圖

電子鐘完成圖

其實這篇跟上一篇的電子鐘從頭到尾都不同，因為我後來覺得這樣比較簡單好看 XD

程式的部分，因為已經知道利用 getFullYear() 可以取得時間，再利用 document.getElementById("Show-year").innerHTML = yy + "年"; 把取得的時間推回我們要顯示時間的格子去顯示出來。

所以我把它們都加以改寫一下，把每個時間都拆開來用不同的 <span> 格子顯示，方便於用 CSS 去針對每個格子做美化的設定。

上程式碼囉！

1
2
3
4
5
6
7
8
9
10
11
12
13
<body onload="ShowTime()">
  <div class="container">
    <span id="Show-year"></span>
    <span id="Show-month"></span>
    <span id="Show-date"></span>
    <br>
    <span id="Show-week"></span>
    <br>
    <span id="Show-hour"></span>
    <span id="Show-minute"></span>
    <span id="Show-second"></span>
  </div>
</body>

添加 CSS 進行美化的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
  margin: 50px; /* 外距 50px */
  padding: 10px; /* 內距 10px */
  width: 200px; /* 寬 200 px */
  background: lavender; /* 背景 薰衣草色*/
  border: 3px solid thistle; /* 邊框 粗3px 實線 薊色*/
  border-radius: 10px; /* 邊框圓角 10px */
  text-align: center; /* 文字對齊 中間*/
  color: indigo; /* 文字靛青色 */
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2); /* 背景陰影效果 */
}
span {
  line-height: 30px; /* 行高*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ShowTime() {
  let date = new Date();
let yy = date.getFullYear(); //年
  let mm = date.getMonth() + 1; //月
  let dd = date.getDate(); //日
let h = date.getHours(); //小時
  let m = date.getMinutes(); //分鐘
  let s = date.getSeconds(); //秒數
let days = ["日", "一", "二", "三", "四", "五", "六"];
document.getElementById("Show-year").innerHTML = yy + " 年";
  document.getElementById("Show-month").innerHTML = mm + " 月";
  document.getElementById("Show-date").innerHTML = dd + " 日";
  document.getElementById("Show-week").innerHTML = "星期" + days[date.getDay()];
  document.getElementById("Show-hour").innerHTML = h + " 點";
  document.getElementById("Show-minute").innerHTML = m + " 分";
  document.getElementById("Show-second").innerHTML = s + " 秒";
setTimeout("ShowTime()", 1000);
}

然後就完成囉～