javascript——记忆小便签

Posted 2020-12-04 pine-cone

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

一、怎么用

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

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

 

二、如果实现

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);