Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Lab2 - Countdown Timer

848 views

Published on

http://MobileDev.TW

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JavaScript Lab2 - Countdown Timer

  1. 1. JavaScript Lab http://MobileDev.TW JavaScript Lab2 好期待的那一天 – 倒數計時器 鐘祥仁 Ryan ryanchung@ncu.edu.tw 1
  2. 2. JavaScript Lab http://MobileDev.TW 畫面 2
  3. 3. JavaScript Lab http://MobileDev.TW 功能 •  設定 •  活動主題 •  活動日期 •  背景圖片設定 •  顯示 •  主題日期 •  主題文字 •  主題距離現在的剩餘時間(會一直倒數) 3
  4. 4. JavaScript Lab http://MobileDev.TW 畫面的拆解 •  主題日期 •  水平線 •  主題 •  剩餘時間 •  還剩下XX天XX時XX分XX秒 •  水平線 •  主題設定輸入 •  文字輸入 •  主題日期輸入 •  HTML5 Input type date •  背景圖片設定 •  下拉式選單 •  背景圖片 4
  5. 5. JavaScript Lab http://MobileDev.TW 基本畫面元素 •  如何產生主題日期? •  如何取得使用者輸入的日期 •  如何產生主題文字? •  如何取得使用者輸入的文字 •  如何產生倒數天時分秒? •  如何計算? •  如何一直倒數 •  如何製作下拉式選單 •  如何一選就換背景 5
  6. 6. JavaScript Lab http://MobileDev.TW 畫面編排 •  文字輸入 •  日期輸入 •  按鈕 •  下拉式選單 •  背景圖片設定 6
  7. 7. JavaScript Lab http://MobileDev.TW 學習重點 •  HTML5 日期輸入 •  日期計算 •  取得使用者輸入與顯示 •  表單元件內容改變事件 •  背景圖片設定 7

×