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

一、怎么用

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

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

?

二、如果實現

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

總結

以上是生活随笔為你收集整理的javascript——记忆小便签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。