javascript——記憶小便簽

標籤：set   htm   app   -o   alert   auto   move   屬性   line   

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

一、怎麼用

可以用它來記錄自己的待辦事項，首先在工作列輸入要添加的事項名稱，點擊添加事項就會自動加入待辦列表裡。

然後在事件列表裡。可以對該事件進行操作，如果已經完成了這件事，點擊事件名，事件就會被劃掉（再次點擊取消劃線）。點擊事件右側的小叉，這個事件就會被完全刪掉。

 

二、如果實現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);

 

javascript——記憶小便簽