javascript——記憶小便籤

這是一個小小的網頁記憶便籤，長這個樣子。

1、怎麼用

能夠用它來記錄本身的待辦事項，首先在任務欄輸入要添加的事項名稱，點擊添加事項就會自動加入待辦列表裏。

而後在事件列表裏。能夠對該事件進行操做，若是已經完成了這件事，點擊事件名，事件就會被劃掉（再次點擊取消劃線）。點擊事件右側的小叉，這個事件就會被徹底刪掉。

 

2、若是實現

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('請輸入任務名稱');
            }
        };

 

（二）事項列表

已經處理的事項分爲兩種：一、點擊添加劃線。 二、點擊取消劃線。

點擊事件項，對事件項<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);