javascript——记忆小便签

这是一个小小的网页记忆便签，长这个样子。

一、怎么用

可以用它来记录自己的待办事项，首先在任务栏输入要添加的事项名称，点击添加事项就会自动加入待办列表里。

然后在事件列表里。可以对该事件进行操作，如果已经完成了这件事，点击事件名，事件就会被划掉（再次点击取消划线）。点击事件右侧的小叉，这个事件就会被完全删掉。

二、如果实现

HTML结构：

<div id="todoList"><div class="todoList-header"><h2>待办事项</h2><div class="todoList-operation"><input type="text" id="add-task-input" placeholder="任务名称"><button id="js-add-task" type="button">添加任务</button></div></div><ul class="todoList-content"><li class="task checked"><p class="text">观看《我不是药神》</p><span class="close">x</span></li><li class="task"><p>准备工作汇报资料</p><span class="close">x</span></li><li class="task"><p>背十个英文单词</p><span class="close">x</span></li><li class="task"><p>三组腹肌撕裂者训练</p><span class="close">x</span></li></ul></div>

CSS：

* {box-sizing: border-box;
}ul, li, p{margin: 0;padding: 0;list-style: none;
}#todoList {width: 80%;max-width: 460px;margin: 20px auto;
}.todoList-header {background-color: #c7eb62;padding: 10px 30px 30px;color: #434343;text-align: center;
}.todoList-operation {position: relative;padding-right: 110px;
}.todoList-header input {width: 100%;padding: 10px;font-size: 16px;vertical-align: middle;
}.todoList-header button {position: absolute;right: 0;top: 0;width: 110px;border: none;background: #d9d9d9;text-align: center;font-size: 16px;padding: 10px;
}.todoList-header button:hover {background-color: #bbb;
}.todoList-content  li {cursor: pointer;position: relative;padding: 12px 8px 12px 50px;background: #eee;font-size: 18px;transition: 0.2s;
}.todoList-content li:hover {background: #ddd;
}.todoList-content li.checked {text-decoration: line-through;
}.todoList-content li.checked::before {content: '';position: absolute;border-color: #0eb312;border-style: solid;border-width: 0 4px 4px 0;top: 10px;left: 16px;transform: rotate(45deg);height: 16px;width: 7px;
}.todoList-content .close {position: absolute;color: #000;right: 0;top: 0;padding: 12px 15px 12px 15px;
}.todoList-content .close:hover {background-color: #f44336;color: white;
}

Javascript

（一）添加待办事项

主要流程是：点击添加任务按钮——将预先设置的HTML模板及输入框里的文字，添加进事件列表里。最后再清空输入框里的文字。

        var addTask = document.getElementById('js-add-task');var taskInput = document.getElementById('add-task-input');var task = document.getElementsByClassName('task');var close = document.getElementsByClassName('close');var todolist = document.querySelector('.todoList-content');addTask.onclick = function (){if(taskInput.value.length > 0){var cont = '<li class="task">' + '<p>' + taskInput.value + '</P>' + '<span class="close">x</span>'; var elem = document.createElement('li');var newElem = todolist.appendChild(elem);newElem.outerHTML = cont;taskInput.value = '';} else {alert('请输入任务名称');}};

（二）事项列表

已经处理的事项分为两种：1、点击添加划线。 2、点击取消划线。

点击事件项，对事件项<li>元素的class属性进行判定如果已经被打上checked的标记，取消划线；如果没有，则添加check标记。

由于事件处理器里的事件对象使用的是实际点击对象（event.target），就会造成点击到<li>元素的子元素，为此再额外增加一条判断，如果是子元素（由于<span>也是<li>的子元素，所以要先确定点击的目标是<p>），就找到它的父元素，再执行点击事件项的判断。

最后，判断点击如果是<span>，则删掉这一条事件项。

大功告成！

        todolist.addEventListener('click', function(event){switch(event.target.className){case 'task checked':event.target.setAttribute('class', 'task');break;case 'task':event.target.setAttribute('class', 'task checked');break;}if(event.target.nodeName == 'P'){switch(event.target.parentNode.className){case 'task checked':event.target.parentNode.setAttribute('class', 'task');break;case 'task':event.target.parentNode.setAttribute('class', 'task checked');break;}} else if(event.target.nodeName == 'SPAN') {this.removeChild(event.target.parentNode);}}, false);

转载于:https://www.cnblogs.com/pine-cone/p/9311108.html