【无标题】

1.功能展示

主要有四个功能，分别包括增加代办事项的功能，删除代办线的功能，修改代办线的功能和查找功能

下面分别介绍如何实现

2. 增加功能

···var data = getDate();
var index = KaTeX parse error: Expected 'EOF', got '#' at position 71: …querySelector("#̲title").addEven…(this).val(),done:false});
local.push({
title: document.querySelector(“#title”).value,
done: false,
done1: true,
hh: document.querySelector(“#hov”).value,
mm: document.querySelector(“#miner”).value,
ss: document.querySelector(“#s”).value

            });
            var h = document.querySelector("#hov").value;
            console.log(h);
            document.querySelector("#title").value = "";
            //把这个数组local 存储给本地存储（或者顶替）
            saveDate(local);
            clearInterval(t);
            load(); //从新加载页面

        }
    }
});
//从本地储存中得到转化出来的数组数据
function getDate() {
    var data = localStorage.getItem("todolist");

    if (data !== null) {
        return JSON.parse(data);
    } else {
        return [];
    }
}
//保存本地存储数据
function saveDate(data) {
    localStorage.setItem("todolist", JSON.stringify(data));
}

这里面的主要实现方法就是通过在输入框中添加键盘鉴定导航，点击确定的时候会判断输入框中的内容是否为空，如果不为空，就将棋的时间以及内容属性等等添加到本地储存中，并且直接渲染出来，其中，添加功能是另起了一个方法，然后调用

3. 删除功能

···
document.querySelector(“#shancu”).addEventListener(“click”, noThing);

function noThing() {
    var data = getDate();
    data.forEach(function (i, num) {
        data.splice(0, 5);
        saveDate(data);
        var child = document.querySelector("ol");
        child.innerHTML = '';
        var child = document.querySelector("ul");
        child.innerHTML = '';
    })
}

删除功能比较简单它的核心思路就是当你点击删除按钮的时候，会自动调用删除方法，删除方法，钟仕先获取到本地储存的数据，然后将点击按钮锁绑定的ID属性获得，并且循环本地储存的数据，找到对应的ID将对应ID的内容整体删除，然后再将这串数据保存到本地数据，将本来的本地数据的述职顶掉，然后重新渲染

4. 修改功能

···
$(“ol”).on(“click”, “button”, function () {
var data = getDate();
var index = $(this).siblings(“a”).attr(“id”);

    document.querySelector("#title1").addEventListener("keydown", function (event) {
        //点击确定
        if (event.keyCode === 18) { //如果点击的是Enter时则
            // if (document.querySelector("#title1").value === "") {
            //     alert("你必须输入内容")
            // } else {

            // data.push({
            //     title: document.querySelector("#title1").value,
            //     done: false,
            //     hh: document.querySelector("#h3").value,
            //     mm: document.querySelector("#m3").value,
            //     ss: document.querySelector("#s3").value

            // });
            document.querySelector("#title1").value;
            data[index].title = document.querySelector("#title1").value;
            data[index].done = false;
            data[index].hh = document.querySelector("#h3").value;
            data[index].mm = document.querySelector("#m3").value;
            data[index].ss = document.querySelector("#s3").value;

            // document.querySelector("#title1").value = "";
            //把这个数组local 存储给本地存储（或者顶替）
            saveDate(data);

            // }
        }
        document.querySelector("#title1").value = "";
    });

})

修改功能也是非常简单的和删除功能非常相似的，首先通过点击修改按钮调用修改对应的方法，首先获得盈利储存，将本地储存中对应修改按钮的ID所对应的事项拿到，然后将它锁需要改的几个内容可以对应修改，然后再重新保存到给您储存，终将原本的本地主任数据顶替掉，最后把渲染出来了

5. 查找功能

let input = document.getElementById(‘val-f’);
let show = document.getElementById(‘show-f’);
input.onkeyup = function () {
show.style.display = ‘block’;
var data = getDate();

    // input.value和 arr的每一项进行匹配 indexOf() 匹配不到 - 1
    let str = '';
    // $.each(data, function (i, n) {
    var j = 0;
    data.forEach((item) => {
        let res = item.title.indexOf(input.value);
        if (res != -1) {

            str += '<p>' + item.title + '<button id=' + j + '>查</button></p>';
        }
        j++;
    })
    // console.log(str);
    //如果input.value为空或者str为false给用户一个提示
    if (!input.value || !str) {
        show.innerHTML = '<p>暂无结果</p>'
    } else {
        show.innerHTML = str;

    }
    if(input.value==''){
        show.style.display = 'none';
    }
}
// input.onblur = function () {
// //     show.style.display = 'none';
//     input.value = '';
// }
$("#show-f").on("click", "button", function () {

    var data = getDate();
    var index = $(this).attr("id");
    // index++;
    console.log(index);
    data[index].done1 = false;
    saveDate(data);

    $("li")[index].style = "background-color:red;"
    // data.splice(index, 1);
    // saveDate(data);
    // clearInterval(t);
    // load();
    show.style.display = 'none';
    input.value = '';
})
查找功能的主要作用是通过查找输入框中某个汉字与内容相匹配，然后展示出来，对于你储存实质是不产生任何影响的，所以在这里只需要获得查找功能输入框的纸，将棋和本地储存这个数朱进行匹配，将对应匹配的值放在查找展示框中即可

因功能比较繁琐，介绍不足敬请谅解，如有疑问可在评论区内探讨