jquery + js 基本实现todolist 增删改查，计时器，时间动态展示

不同todolist版本演示

3月20日

1. input输入框回车确定添加内容

1. 添加键盘监听事件
2. 读取本地存储内容
3. 将新的内容添加到本地存储并保存
4. 渲染内容

$(function () {
   
    renderDate()
    // 1.为TODOlist输入框，添加按下事件，添加todo内容
    $("#title").on("keydown", function (event) {
   
        //回车键
        if (event.keyCode === 13) {
   
             let value = $(this).val()
            if ($.trim(value) === "") {
   
                alert("请输入内容！")
            } else {
   
                // 读取本地文件---》刷新后显示
                let localFile = getDate();
                //更新本地文件到本地
                localFile.push({
    title: $(this).val(), done: false })
                // 存储本地文件
                saveFile(localFile)
                renderDate()
                // $(this).prop("value") =' '
                // location.reload ()
                $(this).val('')//回车后清空input框中的内容
            }
        }
    });

2. 更改待办状态

1. 为创建的input标签添加点击事件
2. 如何确定指定的点击对象？
   • 通过本地存储为a标签添加的索引，找到相应的input标签
3. 点击input标签，更改本地存储对应的属性并保存，通过属性作为渲染的依据

3. 删除待办

1. 完成和未完成都需要删除按钮
2. 删除是删除本地存储对应的内容
3. 如何删除指定的内容?

1. 通过渲染添加标签时，为a标签添加的id,可以找到对应的本地存储对象，并删除
2. 为删除按钮添加点击事件
3. 获取按钮a的索引标记
4. 获取本地存储对象数组，通过索引删除指定对象

  // 删除
    /* 思路分析：
    1. 点击那a(删除按键)就会删除对应的todolist对象数组中的对象，然后渲染
    2. 关键：如何将a和数组对象进行关联，由于a是在遍历对象数组时添加的，同时数组对象索引是可以使用的
    所有可以通过，为a元素添id，并且与数组索引关联，获取a的id,就可以得到数组的索引，通过id删除数组索引，
    让后保存到本地，最后渲染
    */
    $("ol,ul").on('click', 'a', function () {
   
        // 得到本地数据
        let date = getDate()
        // 获取数据与a对于的id,删除数据
        let index = $(this).attr('id')
        date.splice(index, 1)
        // 保存数据到本地
        saveFile(date)
        // 渲染
        renderDate()
    })

4. 修改待办

1. 获取要修改的对象的索引
2. 根据索引找到数组对象，并修改内容
3. 保存到本地
4. 渲染