http://MobileDev.TW

1. JavaScript Lab http://MobileDev.TW
JavaScript
Lab2 好期待的那一天 – 倒數計時器
鐘祥仁 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
畫面的拆解
• 主題日期
• 水平線
• 主題
• 剩餘時間
• 還剩下XX天XX時XX分XX秒
• 水平線
• 主題設定輸入
• 文字輸入
• 主題日期輸入
• HTML5 Input type date
• 背景圖片設定
• 下拉式選單
• 背景圖片
4

5. JavaScript Lab http://MobileDev.TW
基本畫面元素
• 如何產生主題日期？
• 如何取得使用者輸入的日期
• 如何產生主題文字？
• 如何取得使用者輸入的文字
• 如何產生倒數天時分秒？
• 如何計算？
• 如何一直倒數
• 如何製作下拉式選單
• 如何一選就換背景
5

6. JavaScript Lab http://MobileDev.TW
畫面編排
• 文字輸入
• 日期輸入
• 按鈕
• 下拉式選單
• 背景圖片設定
6

7. JavaScript Lab http://MobileDev.TW
學習重點
• HTML5 日期輸入
• 日期計算
• 取得使用者輸入與顯示
• 表單元件內容改變事件
• 背景圖片設定
7