http://MobileDev.TW

1. JavaScript Lab http://MobileDev.TW
JavaScript
Lab3 時時刻刻有人陪 – 動態背景時計
鐘祥仁 Ryan
ryanchung@ncu.edu.tw
1

2. JavaScript Lab http://MobileDev.TW
畫面
2

3. JavaScript Lab http://MobileDev.TW
功能
• 背景圖片
• 固定秒數會自動變換背景圖片
• 時間顯示
• 時間會隨著背景圖片而調整
• 位置
• 大小
• 顏色
• 傾斜度
3

4. JavaScript Lab http://MobileDev.TW
問題
• 如何變更背景圖片？
• 如何固定時間變更背景圖片？
• 如何顯示時間？
• 如何顯示動態時間？
• 如何讓時間文字隨著背景圖片而改變樣式？
4

5. JavaScript Lab http://MobileDev.TW
學習重點
• 計時器
• setInterval()
• 時間顯示格式
• 前面有沒有0
• JavaScript控制CSS樣式
• 位置、字體大小、字體顏色
• CSS3
• transform
5