-
功能
-
css代码
*{ padding:0; margin:0; } ul{ list-style: none; } ol{ list-style: none; } body{ background-color: #cdcdcd; } h2{ margin:20px 0; position: relative; } h2 span{ height: 20px; width: 20px; background-color: #E6E6FA; border-radius: 50%; position: absolute; font-size:16px; right: 0; text-align: center; line-height: 20px; color:#666; } .container{ width:600px; margin: 0 auto; } .f_left{ float: left; } .f_right{ float: right; } .title{ background-color: rgba(47, 47, 47, 0.98); height: 50px; } .title span{ font-size:25px; color:#ddd; line-height: 50px; display: block; } .title input{ border: none; height: 25px; width: 360px; border-radius: 5px; margin-top:12px; text-indent: 1em; box-shadow: 1px 1px 6px 0 #999 inset; } li{ position: relative; border-left: 5px solid #629A9C; border-radius:2px; background-color: #fff; padding:5px 0; margin-top:15px; } li p { margin-left: 40px; margin-right: 40px; } li .final{ height: 22px; width: 22px; position: absolute; left: 10px; } li .del{ position: absolute; right: 10px; width: 14px; height: 14px; border-radius: 50%; border:6px double #fff; top:2px; background-color: #ccc; cursor:pointer; } .final_list li{ border-left-color: #999; background-color: #fff; opacity: 0.5; }
-
HTML代码
<div class="title"> <div class="container"> <span class="f_left">ToDoList</span><input type="text" name="title" id="title" class="f_right" placeholder="添加todo"> </div> </div> <div class="container"> <h2>正在进行 <span class="todo_num">0</span></h2> <ul class="todo_list"> </ul> </div> <div class="container"> <h2>已经完成 <span class="final_num">0</span></h2> <ol class="final_list"> </ol> </div>
-
js代码(需要引用jquery)
<script src=“js/jquery.min.js”>$(function(){ showData(); //用户点击回车触发事件 $("#title").keyup(function(e){ if(e.keyCode === 13){ var text = $(this).val(); if(text == null || text == ''){ return false; } var local = getData(); //将任务记录下来,添加到正在进行的 var data = {title:text,done:false}; local.push(data); setData(local); //将任务添加到正在进行的列表中 showData(); //清空文本框 this.value = ''; } }); //将一个任务添加到列表 i 该数据在数组中的索引号,text内容,final是否完成 function addList(i, text, final){ if(final){ var html = '<li data-id="' + i + '"><input type="checkbox" class="final" checked><p>'+text+'</p><div class="del" ></div></li>'; $('.final_list').prepend(html); }else{ var html = '<li data-id="' + i + '"><input type="checkbox" class="final" ><p>'+text+'</p><div class="del"></div></li>'; $('.todo_list').prepend(html); } } //修改数量的显示个数 function updataNum(num, final){ if(final){ $(".final_num").text(num); }else{ $(".todo_num").text(num); } // final == true ? $(".final_num").text(num) : $("todo_num").text(num); } //循环所有数据显示到页面中 function showData(){ clearList(); var data = getData(); //记录已完成和未完成任务的个数 var finalNum = 0; var todoNum = 0; if(data !== null){ $.each(data, function(i, n){ if(n.done){ finalNum ++; }else{ todoNum ++; } addList(i, n.title, n.done); }); } updataNum(finalNum, true); updataNum(todoNum, false); } //清空列表 function clearList(){ $(".todo_list").children().remove(); $(".final_list").children().remove(); } //获取所有数据 function getData(){ var data = localStorage.getItem('todoList'); if(data == null){ return []; }else{ return JSON.parse(data); } } //保存所有数据 function setData(data){ localStorage.setItem('todoList', JSON.stringify(data)); } //删除数据 function delData(ele){ var id = $(ele).parent().attr('data-id'); var data = getData(); data.splice(id,1); setData(data); showData(); } $(".todo_list").on('click', '.del', function(){ delData(this) }); $(".final_list").on('click', '.del', function(){ delData(this) }); //完成任务 $(".todo_list").on('click', 'input', function(){ var id = $(this).parent().attr('data-id'); var data = getData(); data[id].done = true; setData(data); showData(); }); //取消完成的任务,变为正在进行的 $(".final_list").on("click", 'input', function(){ var id = $(this).parent().attr('data-id'); var data = getData(); data[id].done = false; setData(data); showData(); }); });
7. todoList待办事情列表(js本地存储)
最新推荐文章于 2022-06-25 19:40:54 发布