iT邦幫忙

2021 iThome 鐵人賽
DAY 0
0
自我挑戰組

從零開始學習 JS 的連續-30 Days-系列 第 20 篇

[Day 20]從零開始學習 JS 的連續-30 Days---todolist 待辦事項

13th鐵人賽
603 瀏覽

  • 分享至 

  • xImage
    •  

待辦事項結構 to do list

  1. 需要輸入框與輸入按鈕。
  2. 送出輸入按鈕後產生待辦事項與完成按鈕。
  3. 將事項完成後移除並且讓完成按鈕消失。

新增輸入框與輸入按鈕( 使用HTML )


圖中註解的部分是希望產生的程式碼。

新增待辦事項


圖中流成為:
1.宣告變數將html的標籤設為值。
2.宣告一個預設的空陣列。
3.將想要的內容與格式存入空陣列。
4.產生提示框。
5.印出事件。

刪除待辦事項


圖中流成為:
1.設置監聽範圍(待辦事項所在位置)。
2.設置data-屬性在代辦事項，並賦予排序。
3.取排序值刪除事項與按鈕。

今天就到這結束了。


上一篇
[Day 19]從零開始學習 JS 的連續-30 Days---data- 屬性
下一篇
[Day 21]從零開始學習 JS 的連續-30 Days---陣列操作介紹 (上篇)
系列文
從零開始學習 JS 的連續-30 Days- 共 30 篇
  1. 26
    [Day 26]從零開始學習 JS 的連續-30 Days---冒泡與捕捉事件
  2. 27
    [Day 27]從零開始學習 JS 的連續-30 Days---BOM-瀏覽器物件模型(上)
  3. 28
    [Day 28]從零開始學習 JS 的連續-30 Days---BOM-瀏覽器物件模型(下)
  4. 29
    [Day 29]從零開始學習 JS 的連續-30 Days---網頁座標及應用
  5. 30
    [Day 30]從零開始學習 JS 的連續-30 Days---連續30天的"遺憾賽程"!!
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22203 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙