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

小灰灰 2024-03-25 21:17 32阅读 0赞

#### todolist基本功能 ####

*   *   *  不同todolist版本演示
         *   *  1. input输入框回车确定添加内容
             *  2. 更改待办状态
             *  3. 删除待办
             *  4. 修改待办
             *  5. 查找待办
             *  6. 简单定时器
             *  7. 待办个数统计
             *  8 点击随机名言显示
             *  9. 动态显示时间
             *  10. 其他内容
             *  11. 主要方法
             *  12. 本地存储的数据格式

#### 不同todolist版本演示 ####

3月20日

![在这里插入图片描述][7c699bc57b774014abb383118437e351.jpeg_pic_center]

![在这里插入图片描述][e0e320343e50445db83f49aca41eb79b.jpeg_pic_center]  
![在这里插入图片描述][c7744953ebe142dba0c18c54eb274a5e.jpeg_pic_center]

![在这里插入图片描述][f1a39095d3ce428cad9ed0839891da35.jpeg_pic_center]

![在这里插入图片描述][d20eb1568510480dbd8b42c107a1b4a6.jpeg_pic_center]

![在这里插入图片描述][e72747769f4241458bc5d3d6f80f26c3.jpeg_pic_center]

##### 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.  渲染

// 修改数据
        $("ol,ul")

[7c699bc57b774014abb383118437e351.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/032a2b0d53b241738a27dd5ea9afc1ea.png
[e0e320343e50445db83f49aca41eb79b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b45542f872684235ada982dfe4fbe0ef.png
[c7744953ebe142dba0c18c54eb274a5e.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/68262c5ec8fb4ad6ae00ccb75863ad7b.png
[f1a39095d3ce428cad9ed0839891da35.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f7b351d5e30046639372806a75cd1948.png
[d20eb1568510480dbd8b42c107a1b4a6.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4c19210f02d0491cb964defad4356f76.png
[e72747769f4241458bc5d3d6f80f26c3.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8cb065717fde40d796b8590ea9d82c60.png