前端学习（1049）:todolist正在进行和已经完成阶段2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>todoList待办事项</title><script src="./js/jquery.min.js"></script>
</head><body><header><section><label for="title">ToDoList</label><input type="text" id="title" placeholder="添加ToDo"></section></header><section><h2>正在进行<span id="rodocount"></span></h2><ol id="todolist" class="demo-box"></ol><h2>已经完成<span id="rodocount"></span></h2><ul id="donelist"></ul></section><footer>Copyright &copy;2014 todolist.cn</footer><script>var todolist = [{title: '我今天吃了八个馒头',done: false}, {title: '我今天学习jq',done: false}, ];localStorage.setItem("todo", JSON.stringify(todolist));//本地的数组转换为json.stringfy();var data = localStorage.getItem("todo");console.log(typeof data);//获取本地存储数据需要把字符串数据转换为对象形式json.parsedata = JSON.parse(data);console.log(data);$(function() {//todolist渲染到界面load();//按下回车 把完整数据存储到本地存储里面$("#title").on("keydown", function(event) {if (event.keyCode === 13) {//先读取本地存储原来的数据var local = getDate();console.log(local);//把local数组更新元素local.push({title: $(this).val(),done: false});//把这个数组给本地存储saveDate(local);//todolist渲染到界面load();}});//todolist删除事件$("ol").on("click", "a", function() {//获取本地存储var data = getDate();console.log(data);//修改数据var index = $(this).attr("id");console.log(index);//保存到本地存储data.splice(index, 1);//渲染saveDate(data);load();});//正在进行和已完成$("ol,ul").on("click", "input", function() {//获取本地存储的数据var data = getDate();//修改数据var index = $(this).siblings("a").attr("id");//data[index].done = $(this).prop("checked");// console.log(data);//保存到本地存储saveDate(data);//渲染load();})//读取本地存储的数据function getDate() {var data = localStorage.getItem("todolist");if (data !== null) {//本地存储里面的数据是字符串格式的return JSON.parse(data);} else {//返回一个数组return [];}}//保存数据function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}//渲染数据function load() {//读取本地的数据var data = getDate(data);console.log(data);//遍历之前清空$("ol,ul").empty();//遍历整个数据$.each(data, function(i, n) {//console.log(n);if (n.done) {$("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + n.title +"</p><a href='javascript:;' id=" + i + ">删除</a></li>");} else {$("ol").prepend("<li><input type='checkbox'><p>" + n.title +"</p><a href='javascript:;' id=" + i + ">删除</a></li>");}})}});</script>
</body></html>

运行结果

前端学习（1049）:todolist正在进行和已经完成阶段2相关推荐

前端学习（1048）:todolist正在进行和已经完成阶段
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
如何成为前端开发人员的10个技巧！以及前端学习路线
为你总结了如何成为前端开发人员的10个技巧!以及前端学习路线,欢迎参考! 前端开发需要学习什么?或者需要掌握哪些技能? 在准备学习前端前,您可能不确定从哪里开始.选择什么编程语言,使用什么工具,框架和 ...
前端学习路线图--陆神版本思维导图
说起前端届IT教育老大,怎么能没有千锋的名字,学前端,来千锋,入股不亏,学习带飞! 你可能兜兜转转看了不少路线图只是得到了罗列的知识点和一张思维导图,但是学这些能做些什么?学到这个程度可以找到什么样的 ...
【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...
Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
python比前端好学吗_前端学习到底难不难？
难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...

前端学习（1049）:todolist正在进行和已经完成阶段2

前端学习（1049）:todolist正在进行和已经完成阶段2相关推荐

最新文章

热门文章