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
javascript——记忆小便签相关推荐
- 华为电脑计算机怎么显示在桌面,电脑桌面小便签,华为电脑怎么设置桌面便签...
原标题:电脑桌面小便签,华为电脑怎么设置桌面便签 电脑上有什么桌面小便签?华为电脑怎么设置桌面便签使用?华为电脑可以使用Windows系统,Windows系统上其实是有自带的桌面小便签工具的,打开电脑 ...
- 如何恢复win10小便签中误删的重要信息
**如何恢复win10小便签中误删的重要信息** 链接: 原文转自百度知道. 1.双击点击桌面上的"计算机". 2.在"计算机"的地址栏输入 %appdata% ...
- JavaScript选项卡/页签/Tab的实现
选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...
- windowsNote(小便签)
平常都是把我的plan放在手机的note中,近日想搞个桌面的note,于是就用Qt做了一个,功能比较简单,毕竟便签嘛复杂了就不叫便签了. 功能设计: 1.记录学习或工作计划,与桌面显示以便每日工作有个 ...
- 高效工作的法宝推荐,小小便签助你快人一步
现在不论是什么工作,都十分注重效率.说到提高效率,很多人都十分苦恼,其实现在市面上有很多软件可以称得上为高效工作的法宝,帮助我们摆脱"每天都很忙,却又不知道都忙了些啥"的情况. 敬 ...
- JSON实现桌面可移动的小便签
大多数的管理系统都会有个主程序的桌面,而且上面放置了一个常用的快捷方式或便捷的信息,比如邮件,通知,即丰富了系统内容又能够使用户在第一时间内浏览的信息. 跟XML相比,JSON的优势在于格式简洁短小, ...
- 电脑桌面便签小工具_可以直接在桌面上显示内容的便签软件电脑版
电脑上可以直接在桌面显示内容的便签小工具有很多,比如系统便笺,比如敬业签商务办公云便签,以上班族经常会使用的敬业签桌面工作小便签为例,在电脑桌面上编辑.显示便签内容的主要方法是: 1.点击便签程序顶部 ...
- 电脑显示没有被指定在上运行_可以桌面显示的便条便签怎么弄?有没有电脑桌面上的便条贴...
去采购办公用品时,不难在商店中看到一些方便在工作时记事使用的便签条.便签纸等,便签纸可以用来写留言,便签条可以用来列计划清单,对于工作事务繁杂的上班族来说,利用便签条.便签纸记录工作事项,着实是一个简 ...
- vb把窗体嵌入桌面底层_桌面透明便签插件便签软件
电脑上有哪些可以透明显示的桌面便签小插件吗?Windows电脑上有可以透明显示的便签小插件吗?这篇文章,小编就为大家解答下这个问题. Windows电脑上需要透明的便签小插件,可以打开软件管家搜索安装 ...
最新文章
- python使用matplotlib可视化使用subplots子图、subplots绘制子图并为可视化的子图添加主标题(subplots main title)
- FZU 1019猫捉老鼠
- 逻辑回归的向量化实现样例
- IOS开发数据库篇—SQLite模糊查询
- 分区式存储管理c++_分区机要变形缝,纵横交接卫浴厨:防火阀参数的高效记忆口诀...
- TCP三次挥手四次握手(面试总结)
- 【Python爬虫学习笔记3】requests库
- 有NFC功能的手机可以刷小区门禁吗?
- 开源的一个java 写的图床
- tensorflow之regularizer
- MAC中配置SDK环境变量
- 可复用可扩展的红包后台系统设计方案
- Java入门-换行输出
- 浏览器插件 - Chrome 对 UserScript 的声明头(metadata)兼容性一览
- win的反义词_单词还死记硬背?反义词法让孩子轻松记单词!
- 安信天行全方位信息安全态势感知平台建设与运营
- 派森学python_2019 年 1月 26 日 随笔档案 - 派森学python - 博客园
- 混合云管平台排名您知道吗?看这里
- Count UVA - 1645
- 腾讯地图实现站点标记,及已标记的点回显在地图上