尤川豪   ·  4月前
Exp. 1,633  ·  213 貼文  ·  146 留言

網頁嬰兒自學教材:第1課 ── 親手做一個:訊息提醒框框

第1課 課程目標

做出一個能夠動態顯示成功訊息、錯誤訊息的提醒框框。

你會在這個過程中順便學會:

  • 基本的 jQuery 安裝
  • 簡單的 JavaScript 程式設計
  • 使用 jQuery 顯示、隱藏元素

第1課 課程內容

第一課我們要學習基本的 JavaScript 與 jQuery。

請參考以下教學,學一點 jQuery 的安裝與使用:

接著學三個 jQuery 簡單的動態效果:

第1課 作業

這次的作業要做出訊息提醒框框,模擬註冊成功以及失敗後的情境。

訊息框框非常常見,幾乎在任何一個網站都會用到類似的效果。

歡迎用任何方式寫作業。使用 Thimble 是其中一種簡單的方式。

https://thimble.mozilla.org/zh-TW/

請分三個步驟寫這次的作業。

步驟一

請用純 html 與 css 寫出兩個訊息框框。

第一個框框背景是綠色的,文字為「註冊成功!歡迎您的加入。」。

第二個框框背景是紅色的,文字為「註冊失敗!麻煩再次檢查您填寫的資料。」。

步驟二

用 css 將兩個框框隱藏,預設先不顯示。

接著再做出兩個簡單的按鈕。

步驟三

在按鈕加上兩個效果:

按第一個按鈕之後,模擬為註冊成功,顯示註冊成功的訊息框框。

按第二個按鈕之後,模擬為註冊失敗,顯示註冊失敗的訊息框框。

完成這些,你就完成這次的課程目標了!

  分享   共 1,314 次點閱
共有 0 則留言
您的留言