全局滾動
本文由“壹伴編輯器”提供技術支援
案例實踐:To do list
我們可以寫下我們要做的事,如果做完了打上勾,就會變成已經完成事件,也可以取消完成,回到正在進行中的狀态.
各種檔案引用完畢和準備工作完成以後就開始寫了
這裡補充一點新的知識:
- 本地存儲裡面隻能存儲字元串的資料格式,需要用JSON.stringify()的方法将數組對象轉換成字元串格式.
- 擷取本地存儲的資料,我們需要用JSON.parse()把裡面的字元串資料轉換成對象格式.
①②③:
④⑤⑥:
①②③: 按下回車後就加載渲染,将得到的資料放入li中,然後生成代辦事項
(測試一下)
看看n列印出來是什麼:
修改一下: ①②③
因為是本地存儲的資料,是以是不會丢失的.不僅是要在按下回車才渲染,而是在我們重新整理頁面時就要自動渲染,
看看到現在為止的效果吧:
但是這是有bug的
因為每次加載都會調用load這個函數,而且因為ol裡面本來就有之前的内容,現在又在原先的li的基礎上再追加,就會越來越多.
這時候隻要在每次周遊之前将ol的内容清空就可以了
這樣就能在每次加載的時候,給每個ol填充内容,且一開始是空的ol,是以不會存在多出來的追加.
這樣就OK啦
③給li單獨設定自定義屬性,根據周遊時的索引号
先休息下,明天繼續
④⑤⑥⑦
下一步:完成待辦&撤銷完成
①②③④⑤:
⑥⑦:同時還要修改load()函數,添加一個判斷條件
看看現在的效果吧
接下來就是最簡單的一步了:統計個數
最後還剩下一點不足需要修改一下,比如不能輸入空内容,還有每次按下回車或應該清空輸入框:
over!!!
後面又要學新東西啦!!!現在先去重做一遍,然後去看書.