全局滚动
本文由“壹伴编辑器”提供技术支持
案例实践:To do list
我们可以写下我们要做的事,如果做完了打上勾,就会变成已经完成事件,也可以取消完成,回到正在进行中的状态.
各种文件引用完毕和准备工作完成以后就开始写了
这里补充一点新的知识:
- 本地存储里面只能存储字符串的数据格式,需要用JSON.stringify()的方法将数组对象转换成字符串格式.
- 获取本地存储的数据,我们需要用JSON.parse()把里面的字符串数据转换成对象格式.
①②③:
④⑤⑥:
①②③: 按下回车后就加载渲染,将得到的数据放入li中,然后生成代办事项
(测试一下)
看看n打印出来是什么:
修改一下: ①②③
因为是本地存储的数据,所以是不会丢失的.不仅是要在按下回车才渲染,而是在我们刷新页面时就要自动渲染,
看看到现在为止的效果吧:
但是这是有bug的
因为每次加载都会调用load这个函数,而且因为ol里面本来就有之前的内容,现在又在原先的li的基础上再追加,就会越来越多.
这时候只要在每次遍历之前将ol的内容清空就可以了
这样就能在每次加载的时候,给每个ol填充内容,且一开始是空的ol,所以不会存在多出来的追加.
这样就OK啦
③给li单独设置自定义属性,根据遍历时的索引号
先休息下,明天继续
④⑤⑥⑦
下一步:完成待办&撤销完成
①②③④⑤:
⑥⑦:同时还要修改load()函数,添加一个判断条件
看看现在的效果吧
接下来就是最简单的一步了:统计个数
最后还剩下一点不足需要修改一下,比如不能输入空内容,还有每次按下回车或应该清空输入框:
over!!!
后面又要学新东西啦!!!现在先去重做一遍,然后去看书.
