jQuery实现toDoList

已于 2022-11-26 16:31:05 修改
阅读量409 收藏
点赞数
分类专栏： js 文章标签： jquery css
于 2022-11-26 16:12:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/F14867/article/details/128053193
版权

HTML、CSS、JS、jQuery实现toDolist,实现本地存储功能。

展示

在这里插入图片描述

HTML页面

<!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>第二个玄学</title>
    <link href="../考核/two.css" rel="stylesheet" />
    <script src="../jquery.min.js"></script>
    <script src="../考核/san.js"></script>
</head>
<body>
    <div class="container">

        <!-- 开始头部部分 -->
        <header>
            <section>
                <div class="first">
                    <label for="title">这玄学的一天天</label>
                    <input type="text" id="title" name="title" placeholder="添加任务" required="required" autocomplete="off">
                    <img src="../img/鼓励.png" id="img">
                </div>
            </section>
        </header>
        <!-- 结束头部部分 -->

        <!-- 开始任务部分 -->
        <section>
            <h3>正在进行 <span id="todocount">0</span></h3>
            <ol id="todolist" class="demo-box"></ol>
            <h3>已经完成 <span id="donecount">0</span></h3>
            <ul id="donelist"></ul>
        </section>
        <!-- 结束任务部分 -->
    </div>
</body>
</html>

CSS页面

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
}
ol,ul {
    padding: 0;
    list-style: none;
}
.container {
    width: 660px;
    height: 660px;
    /* background-color: aqua; */
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10%;
    border: 2px solid;
}

/* 开始头部 */
header {
    height: 80px;
    /* background-color: brown; */
    border-radius: 20%;
    padding-top: 3px;
    margin-left: 20px;
}
.first {
    margin-top: 30px;
}
section {
    margin: 0 auto;
}
label {
    float: left;
    width: 150px;
    line-height: 50px;
    color: black;
    font-size: 18px;
    cursor: pointer;
    margin-left: 40px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
header input {
    float: right;
    width: 250px;
    height: 24px;
    margin-top: 12px;
    margin-right: 119px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
	border:none;
}
input:focus{
	outline-width:0
}
img {
    float: right;
    margin-right: -316px;
    margin-top: 12px;
}
/* 结束头部 */


/* 开始任务部分 */
h3 {
    position: relative;
    margin-left: 60px;
}
span {
    position:absolute;
	top:2px;
	right:60px;
	display:inline-block;
	padding:0 5px;
	height:20px;
	border-radius:30px;
	background:rgba(14,191,234,0.62);
	line-height:22px;
	text-align:center;
	color:#666;
	font-size:14px;
}
li input{
	position:absolute;
	top:2px;
	left:50px;
	width:22px;
	height:22px;
	cursor:pointer;
}
p{
	margin: 0;
	user-select: none;
    margin-left: 40px;
}
li p input{
	top:3px;
	left: 83px;
	width:70%;
	height:20px;
	line-height:14px;
	text-indent:5px;
	font-size:14px;
}
li{
	height:32px;
	line-height:32px;
	background: #fff;
	position:relative;
	margin-bottom: 10px;
	padding:0 45px;
	border-radius:3px;
	border-left: 5px solid #629A9C;
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    cursor: pointer;
}
ol li{
	cursor:move;
}
ul li{
	border-left: 5px solid rgb(13, 12, 12);
	opacity: 0.5;
}
li a{
	position:absolute;
	top:2px;
	right:55px;
	display:inline-block;
	width:14px;
	height:12px;
	border-radius:14px;
	border:6px double #FFF;
	background:#0ebc77d9;
	line-height:14px;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	font-size:14px;
	cursor:pointer;
}

/* 结束任务部分 */

JS页面

$(function(){
    // alert(11);
    //  按下回车 把完整数据存储到本地存储里面
    // 存储的数据格式 var todolist=[{title:"xxx",done:false}]
    load();
    $("#title").on("keydown",function(event) {
        if(event.keyCode==13) {
           if($(this).val()===""){
            alert("输入操作");
            var data=getDate();
           }else{
            // alert(11);
            // 先读取本地存储原来的数据
            var local=getDate();
            // console.log(local);
            // 把local数组进行更新数据 把最新的数据追加给local数组
            local.push({title: $(this).val(),done:false});//$(this).val表示上方输入的内容
            // 把这个数组local存储给本地存储
            saveDate(local);//方便本地存储数据调用
            // toDoList本地存储数据渲染加载到页面
            load();
            $(this).val("");
           }
        }
    });
    $("#img").on("click",function(event){
        if($("input").val()===""){
            alert("输入nr");
            var data=getDate();
            
        }else{
            
            var local=getDate();
            local.push({title: $(this).val(),done:false});
            saveDate(local);
            load();
            $("input").val("");
            alert(11);
        }
    })

    //删除操作
    $("ol,ul").on("click","a",function(){
        // alert(11);
        // 按照先获取本地存储 
        var data=getDate();
        // 修改数据 
        var index=$(this).attr("id");
        // console.log(index);
        data.splice(index,1);
        saveDate(data);
        load();
    });



    //正在进行和已完成选项操作
    $("ol,ul").on("click","input",function(){
        // alert(11);
        // 先获取本地存储数据
        var data=getDate();
        // 修改数据
        var index=$(this).siblings("a").attr("id");
        // console.log(index);
        data[index].done=$(this).prop("checked");
        // console.log(data);
        saveDate(data);
        load();
    });

    // 修改
    $("ol, ul").on("dblclick", "p", function() {
        var data = getDate();
        var index = $(this).siblings("a").attr("index");
        // 先将p原来的内容获取过来
        var str = $(this).text();
        // 创建一个文本框，直接添加到p里
        $(this).prepend('<input type="text" />');
        // 将原来内容给文本框，并让其为选中状态
        var input = $(this).children();
        input.val(str);
        input.select();
        // 文本框失去焦点，将修改过的文本框的内容给title
        $(input).on("blur", function() {
            data[index].title = input.val();
            saveDate(data);
            load();
        })
            // 按下回车也可以保存修改
            $(input).on("keyup", function(e) {
                if(e.keyCode === 13) {   // 回车ASCII值为13
                // 手动调用点击事件
                this.blur();
                }
            })
        })


    // 读取本地存储的数据
    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));
    }

    // 渲染加载数据
    function load() {
        var data=getDate();
        // console.log(data);
        // 遍历之前先清空ol里面的元素内容 防止出现两次
        $("ol,ul").empty();
        var todoCount=0;//正在进行的个数
        var doneCount=0;//已经完成的个数
        //遍历这个数据
        $.each(data,function(i,n){
            // console.log(n);
            if(n.done) {
                $("ul").prepend("<li><input type='checkedbox' checked='checked'><p>"+n.title+"</p><a href='javascript:;' id="+i+"></a></li>")
                doneCount++;
            }else{
                $("ol").prepend("<li><input type='checkbox'><p>"+n.title+"</p><a href='javascript:;' id="+i+"></a></li>")
                todoCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
})

同时记得引入jQuery代码

哎呦喂这
关注
专栏目录
jQuery实现todolist全部代码
weixin_61000863的博客
06-23 485
jQuery实现todolist全部代码
用jquery实现Todolist
weixin_52063946的博客
08-12 431
核心思路： 为了防止页面刷新时数据丢失，我们可以把数据保存到我们的本地存储 localStorage 里面。因为在我们的localStorage 中，数据是以字符串格式存储的，但是我们的数据列表是一个数组（对象），因此我们在把数据存放到localStorage 中时，要先用 JSON.stringify() 方法 把数据转换成字符串形式，同理，我们在读取数据时，也要做一个转换，用JSON.parse() 方法把所获取的数据格式转换成对象格式的。 1、我们封装了3个函数： ge...
jQuery实现todolist
牛先森家的博客
08-16 1303
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
ToDoList --- jQuery版
knowledge_bird的博客
03-15 691
ToDoList — jQuery版 html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1
使用jQuery制作todolist
AmyGeng123的博客
10-06 545
使用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
03-28
**jQuery实现简单TodoList** 在前端开发中，TodoList是一个常见的练习项目，它可以帮助开发者熟悉DOM操作、事件处理以及数据管理等基础知识。本教程将详细讲解如何使用jQuery库来实现一个基本的TodoList应用。 ...
jQuery模仿ToDoList实现简单的待办事项列表
10-15
以上就是从给定文件信息中提取出的关于使用jQuery实现简单待办事项列表的知识点。需要注意的是，由于原文档中存在OCR扫描识别错误，以上信息可能在个别细节上有所出入，但在整体上应较为准确地反映了文件的核心内容...
使用jQuery实现ToDoList待办事项功能
"使用jQuery实现一个简单的待办事项（ToDoList）功能，包括添加、完成、删除待办事项，并将数据存储在本地（localStorage），确保页面关闭后数据仍可保留。" 在网页开发中，实现一个待办事项列表是常见的功能需求，...
jQuery实现toDoList------一个记录待办的网页
奇奇怪怪
11-27 561
利用jQuery实现的待办事件添加、删除、完成等功能的简单网页
利用jQuery实现todolist任务列表
春雨惊春.
05-10 421
todolist任务列表前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结项目场景：问题描述：原因分析：解决方案： 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）
用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%;
用JQUERY模仿Angularjs的todoList（mvc）
10-11
用Jquery模仿AngularJs主页的ToDoList功能
jQuery todolist实现
wwwjjjjj666的博客
06-19 494
代码】jQuerytodolist实现。
jQuery基础应用之todoList
突然勤奋的小谢的博客
08-12 403
文章目录todoList的功能相关功能的分析复现功能添加功能标记功能删除功能渲染（加载）功能代码的封装完整的代码总结 todoList的功能 todoList是一个简易方便的待办事项的便签，功能比较简单，适合用来熟悉和复习jQuery的基础操作。其主要的功能有：打开todoList会自动显示上一次使用完的结果；在输入框中输入内容，并按下enter键可以将内容添加到正在进行的事中，并且会将输入框清空，方便下一次的输入；将正在进行的事的前面的复选框打上勾，这件事会从正在进行的事中移除，并自动加入到已经完成的事中
使用jQuery开发Todos实录
oMicro1的博客
08-03 723
使用jQuery开发Todos实录本例是模仿vue.js中todoMVC的功能，使用jQuery进行开发，第一版的jQuery会显得有些混乱，后续将进行优化。 todoMVC具有添加、修改、删除、更改状态、分类等操作todos的功能。我的开发过程分为了以下几个步骤。 将整个应用进行功能拆分 分别实现每个子功能 合并功能 优化 具体实现 添加todos var newtodoVul= $('#
jQuery实现Todo-list
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-02 201
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TodoList Jquery</title> <script src="./jquery.min.js"></script> </head> <...
jq实现todolist
weixin_45077672的博客
05-26 419
html <!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"> <link .
jQuery综合案例——todolist
m0_45659764的博客
05-17 478
--------------------------------------------------本地存储格式------------------------------------------------------------ 注意： 刷新、关闭浏览器都不会丢失数据，所以使用本地存储localStorage 虽然看起来像是直接回车，直接点击的事儿，但是，其中的过程都是先把数据存储到本地存储中，再从本地存储取出数据显示到页面 因为数据很多，所以本地存储的数据采用对象数组的形式 因为本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值