TODOList清单基本功能以及实现

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

一、基本功能

1. 增加内容

2. 完成任务勾选内容

3. 时间提醒

4. 时间推迟

二、基本功能的实现

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);
            }