【jQuery】todoList的实现教程

于 2022-10-13 13:31:16 发布
阅读量487 收藏 2
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58121644/article/details/127299461
版权

作品需要用到的知识

  • jQuery
  • html
  • js
  • css

作品的功能

  • 对todoList的添加，删除，修改查找操作
  • 添加时候记录当前时间
  • 使用本地存储对数据进行保存

页面结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <script src="./jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./new/bootstrap.min.css">
    <script src="./new/bootstrap.min.js"></script>
    <script src="./new/popper.min.js"></script>
</head>

<body style="background-color: rgb(255, 228, 233);">
    <div class="container">
        <div class="header">
            <div class="hander_container">
                <h1>千里之行 始于足下</h1>
                <div class="hander_container_date">
                    6月20星期一
                </div>
            </div>
            <div class="hander_search">
                <input class="hander_search_body" type="text" placeholder="添加或搜索事项" autofocus="autofocus">
                <div class="search_button">
                    <div class="search_plus">
                        <img class="search_plus_img1" src="./image/plus.png" style="width:30px;height:30px">
                    </div>
                    <div class="search_look">
                        <a href="#gain"><img class="search_plus_img2" src="./image/search.png" style="width:30px;height:30px"></a>
                        
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="boundary" style="background-color: #bddd22;">
            待办
        </div>
        <br>
        <div class="todolist_area">
            <!-- <div class="todolist">
                <div class="todolist_icon">
                    <img src="./image/round_check.png" style="width:40px;height:40px">
                </div>
                <div class="todolist_content">
                    去火星旅游
                </div>
                <div class="todolist_time">
                    2022/6/20/21:50:29
                </div>
                <div class="todolist_edit">
                    <img src="./image/edit.png" style="width:33px;height:33px">
                </div>
                <div class="todolist_delete">
                    <img src="./image/delete.png" style="width:40px;height:40px">
                </div>
            </div> -->
        </div>
        <div class="boundary" style="background: #426666;">
            已完成
        </div>
        <div class="donelist_area">
            <!-- <div class="todolist">
                <div class="todolist_icon">
                    <img src="./image/round_checked.png" style="width:40px;height:40px">
                </div>
                <div class="todolist_content">
                    睡午觉
                </div>
                <div class="todolist_time">
                    2022/6/20/12:30:22
                </div>
                <div class="todolist_edit">
                    <img src="./image/edit.png" style="width:33px;height:33px">
                </div>
                <div class="todolist_delete">
                    <img src="./image/delete.png" style="width:40px;height:40px">
                </div>
            </div> -->
        </div>
    </div>
    <div class="example">
        <div class="todolist">
            <div class="todolist_icon">
                <img src="./image/round_check.png" style="width:40px;height:40px">
            </div>
            <div class="todolist_content">
                去火星旅游
            </div>
            <div class="todolist_time">

            </div>
            <button type="button" class="btn todolist_edit" data-bs-toggle="modal" data-bs-target="#myModal">
                <img src="./image/edit.png" width="30px" ,height="30px">
            </button>
            <!-- 模态框 -->
            <div class="modal" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">更换一个名字</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <!-- 模态框内容 -->
                        <div class="modal-body">
                            <div class="modal_body_div">
                                <div>名字:</div>
                                <input type="text" placeholder="新的名字">
                            </div>
                        </div>

                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary my_button">保存</button>
                        </div>

                    </div>
                </div>
            </div>
            <!-- <div class="todolist_edit">
                <img src="./image/edit.png" style="width:33px;height:33px">
            </div> -->
            <div class="todolist_delete">
                <img src="./image/delete.png" style="width:40px;height:40px">
            </div>
        </div>
    </div>

    <script src="./jq.js"></script>
</body>

</html>

jq内容

var recordDateArr;
if (localStorage.length == 0) {
    recordDateArr = new Array();
} else {
    recordDateArr = JSON.parse(localStorage.getItem('recordName'));
}
write();
//向本地写
function write() {
    $(".search_plus_img1").click(function () {
        let searchInput = $(".hander_search_body").val(); //获取到搜索框中的值
        let flag = false;
        if (searchInput.trim() != '' && !dedup(searchInput, flag)) {
            var mydate = new Date;
            let itemObj = {
                'name': searchInput,
                'done': false,
                'time': mydate.getFullYear() + "/" + (mydate.getMonth() + 1) + "/" + mydate.getDate() + "/" + mydate.getHours() + ":" + mydate.getMinutes() + ":" + mydate.getSeconds()
            }
            recordDateArr.push(itemObj);
            localStorage.setItem('recordName', JSON.stringify(recordDateArr));
            location.reload(true);
        }
    });
}
$(".search_look").click(function () {
    let inputContent = document.querySelector('.hander_search_body').value;
    let allContents = document.querySelectorAll(".container .todolist_content");
    if (inputContent == '') return
    for (let i = 0; i < allContents.length; i++) {
        if (allContents[i].innerText == inputContent) {
            alert(' 已找此任务！！！');
            $(allContents[i]).parent().css("backgroundColor", "#63071c");
            $(allContents[i]).parent().attr("id", "gain");
            setTimeout(restart, 2000);

            function restart() {
                $(allContents[i]).parent().css("backgroundColor", "rgb(255, 228, 233)");
                $(allContents[i]).parent().attr("id", "");
            }
        }
    }

});
//数组去重
function dedup(value, flag) {
    for (let i = 0; i < recordDateArr.length; i++) {
        if (value == recordDateArr[i].name) {
            flag = true;
            alert('该数据重复，不能再次添加！！');
            break;
        }
    }
    return flag;
}
//点击添加或者搜索，输入框中的值设为空
$(".search_plus").click(function clear() {
    $(".hander_search_body").val(null);
});
$(".search_look").click(function clear() {
    $(".hander_search_body").val(null);
});
read();
//从本地读
function read() {
    for (let i = 0; i < recordDateArr.length; i++) {
        let arrName = recordDateArr[i].name; //本地获取第i个元素的name
        let arrTime = recordDateArr[i].time; //本地获取第i个元素的time
        let arrDone = recordDateArr[i].done; //本地获取第i个元素的done
        let exampleDiv = $(".example .todolist").clone(true); //获取模板节点并复制
        exampleDiv.children(".todolist_content").text(arrName); //设置复制后的name
        exampleDiv.children(".todolist_time").text(arrTime); //设置复制后的time
        if (arrDone) {
            exampleDiv.children(".todolist_icon").children("img").attr("src", "./image/round_checked.png");
            $(".donelist_area").prepend(exampleDiv); //添加到已做模块
        } else {
            exampleDiv.children(".todolist_icon").children("img").attr("src", "./image/round_check.png");
            $(".todolist_area").prepend(exampleDiv); //添加到未做模块
        }
        // editClick(exampleDiv);
    }
    doneClick();
    deledeClick();
    editClick();
}

// 点击事件 recordDateArr
function doneClick() {
    let displayIconArr = $(".container .todolist .todolist_icon img");
    let displayTextArr = $(".container .todolist .todolist_content");
    for (let i = 0; i < displayIconArr.length; i++) {
        displayIconArr[i].addEventListener('click', function () {
            for (let j = 0; j < recordDateArr.length; j++) {
                if (displayTextArr[i].innerText == recordDateArr[j].name) {
                    recordDateArr[j].done = !recordDateArr[j].done;
                    localStorage.setItem('recordName', JSON.stringify(recordDateArr));
                    location.reload(true); //强制刷新
                }
            }
        });
    }
}

function deledeClick() {
    let displaydeleteArr = $(".container .todolist_delete img");
    let displayTextArr = $(".container .todolist_content");
    for (let i = 0; i < displaydeleteArr.length; i++) {
        displaydeleteArr[i].addEventListener('click', function () {
            for (let j = 0; j < recordDateArr.length; j++) {
                if (displayTextArr[i].innerText == recordDateArr[j].name) {
                    recordDateArr.splice(j, 1);
                    localStorage.setItem('recordName', JSON.stringify(recordDateArr));
                    location.reload(true); //强制刷新
                }
            }
        });
    }
}

// 修改函数
function editClick(e) {
    var indexName;
    e.get(0).querySelector('.todolist_edit').addEventListener('click', function () {
        indexName = this.querySelector('.todolist_content');
        console.log(indexName);
    });
    e.querySelector('.my_button').addEventListener('click', function () {
        for (let i = 0; i < recordDateArr.length; i++) {
            if (recordDateArr[i].name == indexName) {
                recordDateArr[i].name = e.querySelector('.modal_body_div input').value;
            }
        }
        localStorage.setItem('recordName', JSON.stringify(recordDateArr));
    });
}
// function editClick(e, nameA) {
//     //获取按钮添加监听
//     e.find(".btn-primary").click(function addEdit() {
//         for (let j = 0; j < recordDateArr.length; j++) {
//             if (recordDateArr[j].name == nameA && e.find("input").val() != '') {
//                 recordDateArr[j].name = e.find("input").val();
//                 break;
//             }
//         }
//         localStorage.setItem('recordName', JSON.stringify(recordDateArr));
//     });
// }
function editClick() {
    let saveTodoAll = document.querySelectorAll('.container .todolist');
    for (let i = 0; i < saveTodoAll.length; i++) {
        var indexName; //获取点击按钮对应那个词条的name值
        saveTodoAll[i].querySelector('.todolist_edit').addEventListener('click', function () {
            indexName = this.parentElement.querySelector(".todolist_content").innerText;
            console.log(indexName);
        });
        saveTodoAll[i].querySelector('.my_button').addEventListener('click', function () {
            let inputText = saveTodoAll[i].querySelector('.modal_body_div input').value.trim();
            for (let j = 0; j < recordDateArr.length; j++) {
                if (recordDateArr[j].name == indexName && inputText != '') {
                    console.log('aaa');
                    recordDateArr[j].name = inputText;
                    break;
                }
            }
            localStorage.setItem('recordName', JSON.stringify(recordDateArr));
            location.reload(true); //强制刷新
        });
    }
}
$(window).unload(function () {
    var top = $(window).scrollTop();
    localStorage.setItem('scroll_top', top);
});
$(document).ready(function () {
    var top = $.localStorage.getItem('scroll_top');
    $('html,body').animate({
        scrollTop: top
    }, 100);
});

作品的完整代码：下载链接🔗

作品页面

在这里插入图片描述
已勾选和未勾选的数据分在待办和已完成两个部分
在这里插入图片描述

修改某一个词条的信息
在这里插入图片描述

妮听得到
关注
jQuery实现todolist全部代码
weixin_61000863的博客
06-23 520
jQuery实现todolist全部代码
ToDoList 的实现
JC_5445的博客
07-19 255
逻辑思路： 结构： <body> <!-- 头部 --> <header> <div> <h3>ToDoList</h3> <input id="add" type="text" placeholder="添加ToDo"> </div> </header> <!-- 内.
利用jQuery实现todolist任务列表
春雨惊春.
05-10 462
todolist任务列表前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结项目场景：问题描述：原因分析：解决方案： 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）
使用jQuery制作todolist
AmyGeng123的博客
10-06 578
使用jQuery制作todolist HTML部分： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-
jQuery实现todolist
牛先森家的博客
08-16 1338
jQuery实现todolistjQuery实现todolistjshtmlcss效果图 jQuery实现todolist 1、本地存储localStorage 2、jQuery实现交互 js $(function () { // alert(11); // 1. 按下回车 把完整数据 存储到本地存储里面 // 存储的数据格式 var todolist = [{title: "xxx", done: false}] load(); $("#title").on("keydown", f
Jquery实现简单TodoList
03-28
本教程将详细讲解如何使用jQuery库来实现一个基本的TodoList应用。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery的核心特性是通过选择器找到DOM元素，...
用JQUERY模仿Angularjs的todoList（mvc）
10-11
本教程将聚焦于如何使用jQuery来模仿AngularJS的TodoList功能，这是一个经典的MVC（Model-View-Controller）模式应用实例，让我们深入了解这两个库的不同之处以及如何在jQuery中实现类似的功能。 首先，AngularJS是...
jQuery打造实用todolist教程
根据所提供的信息，我们可以分析出相关知识点主要集中在前端开发领域，特别是使用jQuery框架来实现一个待办事项列表（Todo List）。现在我们将详细探讨这些知识点。 ### jQuery实现Todo List知识点分析 #### 1. ...
掌握jQuery基础与原生JS操作：ToDoList案例教程
资源摘要信息:"jQuery-ToDoList案例是一个使用jQuery实现的待办事项列表应用，该案例充分利用了本地存储功能，涵盖了jQuery所有基本操作，同时也应用了原生JavaScript对数组和对象进行增加、删除、修改和查询的技巧...
使用jQuery实现本地存储的TodoList应用
"jQuery模仿ToDoList实现简单的待办事项列表" 在这个教程中，我们将学习如何使用jQuery来创建一个模仿ToDoList的应用，这个应用允许用户管理他们的待办事项。以下是实现这个功能所需的关键知识点： 1. **jQuery库*...
用jQuery–实现todolist待办事项清单
01-08
效果图 实现todolist整体思路： 思路图如果看着不方便 js代码里面已经做好详细注释 ToDoList—最简单的待办事项列表 ToDoList 正在进行 已经完成 Copyright :copyright: 2014 todolist.cn css代码 @media screen and (max-device-width: 620px) { section { width: 96%; padding: 0 2%;
TodoList的实现
xinyiddd的博客
12-30 590
文章目录前言一、React 事件处理二、事件用法三、例子TodoList总结 前言 上次我们说了React的目录的结构介绍、组件与Props等这次我们就来说说事件处理的用法并做一个实例 一、React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法，而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法) 你不能使用返回 false 的方式阻止默认行为，你必须明确的
ToDoList的实现
nanxing的博客
07-11 1798
ToDoList的实现 效果图 需要有一个输入框，可以输入文本并添加到今日计划中 .可以将今日计划勾选完成 .可以删除指定的计划 数据实现持久化，避免浏览器刷新后数据不丢失 部分代码还是一样的，我就没提取出去做一个单独的函数了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
用jquery实现Todolist
weixin_52063946的博客
08-12 456
核心思路： 为了防止页面刷新时数据丢失，我们可以把数据保存到我们的本地存储 localStorage 里面。因为在我们的localStorage 中，数据是以字符串格式存储的，但是我们的数据列表是一个数组（对象），因此我们在把数据存放到localStorage 中时，要先用 JSON.stringify() 方法 把数据转换成字符串形式，同理，我们在读取数据时，也要做一个转换，用JSON.parse() 方法把所获取的数据格式转换成对象格式的。 1、我们封装了3个函数： ge...
jQuery todolist实现
wwwjjjjj666的博客
06-19 523
代码】jQuerytodolist实现。
用jquery做一个todolist
梦清尘的博客
12-09 564
$(function() { // alert(11); // 1. 按下回车 把完整数据 存储到本地存储里面 // 存储的数据格式 var todolist = [{title: "xxx", done: false}] load(); $("#title").on("keydown", function(event) { if (eve...
jquery实现TODOList
weixin_30367169的博客
03-03 238
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ToDoList</title> <link rel="stylesheet" type="text/css" href="ToDoList1.css"...
jQuery实现简易TodoList
liaoai的博客
03-01 528
文章目录todolist案例html结构功能分析 todolist案例 html结构 功能 功能一： 文本框里面输入内容，按下回车，就可以生成待办事项。 功能二： 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 功能三： 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 功能四： 但是本页面内容刷新页面不会丢失。 功能五： 删除事项 功能六： 统计事件个数 分析 对于功能四，需要用到本地存储localStorage，不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值