TODOList清单基本功能以及实现

本文主要实现TODOList清单的一些基本功能，一些基本的css样式这里就不多说了，读者可以自己设置自己的css样式，这里着重介绍一下js实现的一些功能

一、基本功能

增加内容
完成任务勾选内容
时间提醒
时间推迟

二、基本功能的实现

1.增加内容

增加内容的基本逻辑是首先设定一个大盒子task，然后将任务点taskdot加入到task盒子中，每一个任务点的样式除任务点内容外其余样式都一样，每个任务点的其余样式均已在模板盒子中设定好，如日期、提醒、推迟等功能在后边会介绍。

<!-- 模板盒子 --><div class="muban"><div class="taskdot"><!-- 图片 --><div class="img b"><img class="tupian" src="1.png" alt="" width="30px"></div><!-- 内容 --><div class="taskcontent b"></div><!-- 时间 --><div class="time b"></div><!-- 推迟与提醒 --><div class="push"><!-- 时间提醒按钮 --><span><button id="remind">提醒</button><!-- 时 --><select name="hourselect" id="hourselect"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option></select><!-- </form> --></span><!-- 时间推迟按钮 --><span id="one"><button id="pushtime">推迟</button><select name="pushminuteselect" id="pushminuteselect"><option value="">0</option><option value="">1</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="20">20</option><option value="25">25</option><option value="30">30</option><option value="">36</option></select></span></div></div></div>

let newtaskinput = input.value;  //新建变量newtaskinput使其获取每个新建任务点的内容
let muban = document.querySelector('.muban');  //获取模板盒子的节点
let newtaskcontainer = muban.cloneNode(true);  //复制muban节点以及所有子节点(深度克隆)
let newtaskdot = newtaskcontainer.querySelector('.taskdot');  //  获取任务点这个节点
newtaskdot.querySelector('.taskcontent').innerText = newtaskinput;  //将新任务内容写入每个任务点
let firsttodo = document.querySelector('.task .taskdot');
//在task盒子中将firsttodo插入到newtaskdot
document.querySelector('.task').insertBefore(newtaskdot,firsttodo);
input.value = '';  //将输入框清空
let icon = newtaskdot.querySelector('.tupian');  //获取每个任务点前面的图片(任务完成与未完成时更换图片)

2.完成任务勾选内容

完成任务时，点击任务点前面的绿色图片即可将该任务点移入已完成的盒子，并且将该任务点内容划线。

/*
上边已经获取到图片的节点，接下来只需要操作图片并改变相应的任务点状态和位置即可
*/
icon.onclick = function(event){
if(icon.src.includes('2')){  //这里是判断该图片名字是否含有‘2’这个数字，括号中可以填自己图片所命的名含有的关键字icon.setAttribute('src','1.png');  //图片切换let todotext = icon.parentElement.parentElement.querySelector('.taskcontent');  //获取icon父级的父级里面的taskcontent节点todotext.style.textDecoration = 'none';  //下划线改为无let firsttodo = document.querySelector('.task .taskdot');  //获取节点//在task中firsttodo前插入icon.parentElement.parentElement(将最新设定的任务点放到整个任务盒子的最前面)document.querySelector('.task').insertBefore(icon.parentElement.parentElement,firsttodo);
}else{  //大部分功能同上，增加下划线icon.setAttribute('src','2.png'); let todotext = icon.parentElement.parentElement.querySelector('.taskcontent');todotext.style.textDecoration = 'line-through'; document.querySelector('.taskdotok').appendChild(icon.parentElement.parentElement);// 点击完成以后写入下边的盒子document.querySelector('.accomplishdone').appendChild(icon.parentElement.parentElement);  //将新增加的任务加入到已完成的盒子中}
};

3.时间提醒

时间提醒功能比较简单，过去当前时间，然后获取到设定的时间的值，两者相比较，如果值一样，那么网页弹出相应的提示词即可。

var hourselect = document.getElementById("hourselect");hourselect.onchange = function() {var h = hourselect.options[hourselect.selectedIndex].value;  //获取下拉菜单中时间选项的值if(activehour == h){  //当前时间与设定时间作比较window.alert("时间已到");}

4.时间推迟

由于时间提醒功能设定为只可以设定整点，故时间推迟功能可设定的推迟时间均在一个小时内。

var pushminuteselect = document.getElementById("pushminuteselect");pushminuteselect.onchange = function() {var pm = pushminuteselect.options[pushminuteselect.selectedIndex].value;console.log(pm);var time = setTimeout(function(){window.alert("推迟完成任务时间已到");},pm*60000);}

TODOList清单基本功能以及实现相关推荐

任务清单小功能的实现（任务的增、删、改、查、存储）使用Vue实现
文章目录 1.实现的效果(视频演示) 2.重点讲解(编辑的实现) 2.1 提示(官网介绍nextTick的用法) 3.编辑功能的核心代码 4.完整的代码 5.以往练习任务清单案例(纯Vue) 实现的 ...
todolist清单的基本功能以及如何实现
一.基本功能任务的增加删除任务完成勾选与全选定时功能延时功能二.如何实现本质是对DOM节点的各种操作,添加删除,以及定时器定时延时功能,对节点的遍历筛选等操作 html部分 <! ...
SAP中销售处理到期发票清单VF04功能的应用
SAP中SD销售模块中有一个标准功能用于处理到期发票清单功能. 该功能虽然在操作和应用上比较简单直观,但实用性很强.其应用范围可能覆盖到物流,销售,财务.所以,本文重点不是该功能的应用,而是其背后的应 ...
源生的html属性js,源生JS怎样实现todolist功能
这次给大家带来源生JS怎样实现todolist功能,源生JS实现todolist功能的注意事项有哪些,下面就是实战案例,一起来看一下. 该项目主要可以练习js操控dom,事件,事件触发之间的逻辑关系, ...
ToDoListEditor 任务清单工具
基于Odin和ScriptableObject实现的一个简单的任务清单工具,可以添加.删除任务,编辑任务标题和任务描述. Github地址:https://github.com/m969/ToDoLi ...
五十六、TodoList的三种写法，祭奠我的前端之路
@Author:Runsen @Date:2020/10/14 我是Runsen,目前是一名XX学院的大四学生.回想起自己正式涉足CSDN的学习,已然过去三年又几.这三年里,有困惑.迷茫,也有坚持.不 ...
iphone已停用解锁大概多少钱_【待办清单工具之三】微软To Do amp; iPhone提醒事项-来自大厂的时间管理系统...
在使用滴答清单之前我用过一段时间的奇妙清单,后来奇妙清单被微软收购.微软根据奇妙清单推出了自己的产品Microsoft To Do,这个产品总体的感觉是功能简洁,界面大气,典型的微软大厂的产品. 同时 ...
jsf 写一个action_一个JSF清单示例
jsf 写一个action 这是使用JSF 2.0(JavaServer Faces)构建的示例列表应用程序. 该应用程序是待办事项列表. 该应用程序具有添加,编辑或删除列表中项目的功能. 待办事项具 ...
[转载] python 需求清单_Python清单操作摘要
参考链接: Python清单 python 需求清单列出功能和方法,理解和性能特征 (List Functions & Methods, Comprehension and Performa ...

TODOList清单基本功能以及实现

一、基本功能

二、基本功能的实现

TODOList清单基本功能以及实现相关推荐

最新文章

热门文章