Todolist使用localstroage保存数据,Jq实现点击编辑等功能
要求：
- 点击新增数据末尾 “-” 按钮可以删除这条数据
- 勾选checkbox将正在进行的元素放入已经完成的元素之中
- 计算”正在进行”和 “已经完成” 的内容数量，将计算结果放入灰色元素之中。
- 页面刷新，数据不会重置，（使用localstroage保存数据）
实现的效果如下图：
html部分
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" class="f" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2 >正在进行 <span id="todocount">0</span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2 >已经完成 <span id="donecount">0</span></h2>
<ul id="donelist">
</ul>
</section>
css部分
body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
input:focus{outline-width:0}
h2{position:relative;}
span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
p{margin: 0;}
li p{position:absolute;top:3px;left:40px;width:70%;height:25px;line-height:25px;text-indent:5px;font-size:14px; }
li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
ol li{cursor:move;}
ul li{border-left: 5px solid #999;opacity: 0.5;}
li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
footer{color:#666;font-size:14px;text-align:center;}
footer a{color:#666;text-decoration:none;color:#999;}
@media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
@media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}
用原生js实现： 没有实现localstroage
var do_list = document.getElementById("todolist");
var done_list = document.getElementById("donelist");
var add = document.getElementById("title");
var do_n= document.getElementById("todocount");
var done_n = document.getElementById("donecount");
var one = document.getElementById("one");
add.onkeydown=function(eve){
var e=eve || event;
var code=e.keyCode|| e.which;
if(code ===13){
createEle(do_list);
}
}
//创建函数
function createEle(list){
// 创建元素
var li = document.createElement("li");
var input = document.createElement("input");
var p = document.createElement("p") ;
var a = document.createElement("a");
// input添加属性
input.setAttribute("type","checkbox")
// 页面书写内容
p.innerHTML = add.value;
a.innerHTML = "—";
add.value="";
// 将元素写入页面
li.appendChild(input);
li.appendChild(p);
li.appendChild(a);
// 将元素放入容器
list.appendChild(li);
// do_list.insertBefore(li,do_list.children[0])
// 将容器中li的个数放入到计数中
do_n.innerHTML = do_list.children.length;
done_n.innerHTML = done_list.children.length;
}
//正在做的列表事件
do_list.onclick = function(eve){
var e = eve || event;
var target = e.target || e.srcElement;
// 点击页面节点是p时就将其转换成可编辑的状态
//p可编辑或不可编辑的状态
uses(target.nodeName,target);
del(target,done_list,do_list);
}
//已经完成的列表事件
done_list.onclick = function(eve){
var e = eve || event;
var target = e.target || e.srcElement;
del(target,do_list,done_list);
}
//删除和选中框发生变化的时候
function del(target,list1,list2){
//是否删除的状态
console.log(target.parentNode.parentNode.nodeName, target.parentNode.parentNode.nodeName==="OL");
if(target.nodeName==="A"){
// 统计节点个数
list2.removeChild(target.parentNode);
// console.log(target.parentNode.nodeName, target.parentNode.parentNode.nodeName==="OL");
if(target.parentNode.nodeName==="OL"){
do_n.innerHTML = list1.children.length;
return;
}
done_n.innerHTML = list2.children.length;
}
// 当选中框变化的时候，将元素写入到不同的位置
if(target.nodeName==="INPUT"){
console.log(target.checked);
target.onchange = function(){
if(target.checked){
createEle(list1);
list2.removeChild(target.parentNode);
}else{
createEle(list2);
}
// 将容器中li的个数放入到计数中
do_n.innerHTML = list1.children.length;
done_n.innerHTML = list2.children.length;
}
}
}
//p可编辑或不可编辑的状态
function uses(name,ele){
console.log(name);
if(name==="P"){
ele.contentEditable=true;
return;
}else{
ele.contentEditable=false;
}
}
jq的实现：需要首先引入jquery,不然jq部分的代码就不会生效的。
//获取页面中的元素
var $add = $("#title"),
$do_list = $('#todolist'),
$done_list= $('#donelist'),
$do_count= $('#todocount'),
$done_count =$('#donecount');
//页面加载时候根据localStorage里面的元素渲染页面
$(
function() {
$do_list.append(localStorage.getItem('do_list'));
$do_count.text(($('#todolist li').length));
$done_list.append(localStorage.getItem('done_list'));
$done_count.text(($('#donelist li').length)) ;
}
);
//给输入框添加键盘按下事件
$add.keydown(function(eve){
var e =eve||event;
var code = e.keyCode||e.which;
//当按下回车的时候触发事件，创建元素在页面中并存储到key=do_list的localstorage中
if(code==13){
createEle($do_list,$add.val());
$add.val('');
$do_count.text(($('#todolist li').length));
localStorage.setItem('do_list', $do_list.html())
}
})
//利用事件代理触发事件
$do_list.on('click',function(eve){
var e = eve ||event ;
var $target = $(e.target)||$(e.srcElement);
//当前元素事选则框的时候去给选择框添加选中属性，待处理中删除该行元素。完成列表添加元素
if($target.is('input')){
$target.attr('check','checked');
createEle($done_list,$target.siblings('p').text());
del($($target).parent('li'));
$done_count.text(($('#donelist li').length)) ;
$do_count.text(($('#todolist li').length));
localStorage.setItem('done_list',$done_list.html());
localStorage.setItem('do_list',$do_list.html());
//当前元素是a标签的时候删除元素，更改存储变量
}else if($target.is('a')){
del($($target).parent('li'));
$do_count.text(($('#todolist li').length));
localStorage.setItem('done_list',$done_list.html());
localStorage.setItem('do_list',$do_list.html());
}
//当前元素的标签是p标签的时候，给p标签添加可编辑状态的属性，属性值为true
else if($target.is('p')){
$target.attr('contentEditable','true');
localStorage.setItem('done_list',$done_list.html())
localStorage.setItem('do_list',$do_list.html())
}else{
$('p').attr('contentEditable','false');
}
})
//给完成列表添加事件代理
$done_list.on('click',function(eve){
var e = eve ||event ;
var $target = $(e.target)||$(e.srcElement);
//选中标签是input的时候将在未完成的列表中添加元素，在完成列表中删除一个元素。存储同理
if($target.is('input')){
createEle($do_list,$target.siblings('p').text());
del($($target).parent('li'));
$done_count.text(($('#donelist li').length)) ;
$do_count.text(($('#todolist li').length));
localStorage.setItem('done_list',$done_list.html())
localStorage.setItem('do_list',$do_list.html())
console.log($target.is('a'))
}
//点击的是a标签的时候，完成列表中删除一行。更改计数，更改存储
else if($target.is('a')){
del($($target).parent('li'));
$done_count.text(($('#donelist li').length)) ;
localStorage.setItem('done_list',$do_list.html())
}
});
//创建元素的函数，两个变量：elel是页面中需要追加的元素，value获取的元素值。
function createEle(ele,value){
var html =`<li> <input type="checkbox" check/><p style="cursor: pointer;">${value}</p> <a href='javascript:void(0)'>-</a></li>`
ele.append(html);
}
// 删除元素
function del(target){
target.remove();
}
做个傲娇的家伙！
浙公网安备 33010602011771号