【案例的实现步骤】
1-效果分析【需求分析】
2-功能模块的魔化【功能分析】--实现步骤想清楚
3-按照你琢磨的步骤,去写代码
// [{title:'吃火锅',done:false}, 代办的事项2,代办的事项3,];
【todolist案例的功能分析】
【1-回车模块
/*
1)获取内容
2)把内容组装成一个代办事项 【数组】
3)代办事项保存到浏览器中【字符串】【把数组转成字符串,再存储】
** 浏览器中可能有数据,也可能没有数据
第1,先从浏览器中获取数据(有 -追加、没有--添加)
空数组 或者 有数据的数组
第2,数据(对象{title:'',done:false})添加到数组中
第3,把数组变成字符串,存储到浏览器中--调用存储数据的函数
4)从浏览器中取出代办事项,渲染到页面
数组 ----》页面的 标签
遍历数组 创建标签 添加标签
*/
【2-删除
/*
1)使用On()方法,给a注册单击事件
2)事件处理函数中
1-从浏览器获取数据【数组】
2-获取当前a标签上的自定义属性-索引号【渲染数据时,每个a自定义一个属性,记录数据的索引】
3-把数组中对应索引号的数据删除--数组对象的方法
4-把数组重新保存到浏览器
5-重新渲染数据
*/
【3-勾选复选框
/*
1)使用on()方法,给input注册单击事件
2)事件处理函数中
1-从浏览器获取数据【数组】
2-获取索引号(从当前input的兄弟a上面获取)
3-修改数组中对应元素的done属性的值 【当前input的checked属性的值】
4-把数组重新保存到浏览器
5-重新渲染数据
【渲染函数要做修改:判断done的值,
true就把li添加到ul中,
false就把li添加到ol中
】
*/ |
|