todolist实现过程，完整代码

最新推荐文章于 2023-06-06 16:39:51 发布
最新推荐文章于 2023-06-06 16:39:51 发布
阅读量505 收藏
点赞数
文章标签： js jquery html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyanqin2545/article/details/116093060
版权

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>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 16px;
            background: #CDCDCD;
        }

        header {
            height: 50px;
            background: rgba(47, 47, 47, 0.98);
        }

        section {
            margin: 0 auto;
        }

        label {
            float: left;
            width: 100px;
            line-height: 50px;
            color: #DDD;
            font-size: 24px;
            cursor: pointer;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        header input {
            float: right;
            width: 60%;
            height: 24px;
            margin-top: 12px;
            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
        }

        h2 {
            position: relative;
        }

        span {
            position: absolute;
            top: 2px;
            right: 5px;
            display: inline-block;
            padding: 0 5px;
            height: 20px;
            border-radius: 20px;
            background: #E6E6FA;
            line-height: 22px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        ol,
        ul {
            padding: 0;
            list-style: none;
        }

        li input {
            position: absolute;
            top: 2px;
            left: 10px;
            width: 22px;
            height: 22px;
            cursor: pointer;
        }

        p {
            margin: 0;
        }

        li p input {
            top: 3px;
            left: 40px;
            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);
        }

        ol li {
            cursor: move;
        }

        ul li {
            border-left: 5px solid #999;
            opacity: 0.5;
        }

        li a {
            position: absolute;
            top: 2px;
            right: 5px;
            display: inline-block;
            width: 14px;
            height: 12px;
            border-radius: 14px;
            border: 6px double #FFF;
            background: #CCC;
            line-height: 14px;
            text-align: center;
            color: #FFF;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
        }

        footer {
            color: #666;
            font-size: 14px;
            text-align: center;
        }

        footer a {
            color: #666;
            text-decoration: none;
            color: #999;
        }

        @media screen and (max-device-width: 620px) {
            section {
                width: 96%;
                padding: 0 2%;
            }
        }

        @media screen and (min-width: 620px) {
            section {
                width: 600px;
                padding: 0 10px;
            }
        }
        
    </style>
    <!-- 进入我们的jquery，引入之后才可以使用 -->
    <script src="./jquery-1.12.4.min.js"></script>
</head>

<body>
    <!-- 头部 开始-->
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required">
        </section>
    </header>
    <!-- 主体开始 -->
    <section>
        <h2>正在进行<span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
        </ol>
        <h2>已经完成<span id="donecount"></span>
        </h2>
        <ul id="donelist">
        </ul>
    </section>
    <!-- 尾部开始 -->
    <footer>
        Copyright © 2014 todolist.cn
        <a href="">clear</a>
    </footer>
</body>
<script>

    $(function () {
        load();
        // 1、按下回车 把完整数据 存储到本地存储里面
        //对象.on("事件类型"，事件函数)
        $("#title").on("keydown", function (event) {
            if (event.keyCode === 13) {
                console.log($(this));
                if ($(this).val() === "") {
                    alert("请输入您要进行的操作");
                } else {
                    // 先读取本地存储原来的数据;
                    // console.log(getDate());
                    var local = getDate();
                    // 把local数组进行更新数据 把最新的数据追加给local数组
                    local.push({ title: $(this).val(), done: false });
                    // 把这个数组local 存储给本地存储
                    saveDate(local);
                    // 2、把本地存储的数据渲染到页面
                    load();
                    $(this).val("");
                }
            }

        })
        // 3、todolist 删除事件
        $("ol,ul").on("click", "a", function () {
            // 先获取本地存储
            var data = getDate();
            // 修改数据(attr可以获取我们自定义的属性)
            var index = $(this).attr("id");
            // 数组 删除操作
            data.splice(index, 1);
            // 保存到本地存储
            saveDate(data);
            // 重新渲染页面
            load();
        })
        // 4、正在进行和已经完成选项操作
        // 并集选择器 点击事件 事件委托
        // 将事件绑定在父元素身上，当子元素触发事件时，事件冒泡给父元素，父元素相应事件，this代表触发事件的子元素；
        $("ol,ul").on("click", "input", function () {
            // 先获取本地存储数据
            var data = getDate();
            // 修改数据
            // input 的索引号 就是当前 它 兄弟 的索引号
            var index = $(this).siblings("a").attr("id");
            // console.log(index);
            data[index].done = $(this).prop("checked");
            // 保存到本地存储
            saveDate(data);
            // 重新渲染页面
            load();
        })
        // 先读取本地存储原来的数据（因为经常使用所以封装为函数）
        function getDate() {
            // 思路：先去本地存储里面把 todolist 获取出来（需要判断一下，它是否为空，如果为空，说明我们从未在里面存储过数据，所以返回空的数组；不为空，说明里面有数据，将数据转换为对象形式我们才可以使用）
            var data = localStorage.getItem("todolist");
            if (data !== null) {
                // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
                return JSON.parse(data);
            } else {
                return [];
            }
        }
        // 保存本地存储数据(localStorage 里面只能存储字符串格式，因此将对象转换为字符串JSON.stringify（）;)
        function saveDate(data) {
            localStorage.setItem("todolist", JSON.stringify(data));
        }
        // 渲染加载数据
        function load() {
            // 读取本地存储的数据
            var data = getDate();
            // console.log(data);
            // 遍历之前 先要清空ol里面的元素内容
            $("ol,ul").empty();
            // 5、统计个数
            var todoCount = 0;
            var doneCount = 0;
            // 遍历这个数据
            $.each(data, function (i, n) {
                if (n.done) {
                    $("ul").prepend("<li><input type='checkbox' 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);
        }
    })
</script>
</html>
琴～～
关注
ToDoList 的实现
JC_5445的博客
07-19 219
逻辑思路： 结构： <body> <!-- 头部 --> <header> <div> <h3>ToDoList</h3> <input id="add" type="text" placeholder="添加ToDo"> </div> </header> <!-- 内.
todolist实现
zhao_li_ming的博客
09-28 751
1.效果图 2.分析步骤 （1）搭建vue项目 vue create todolist (2) 接着写静态布局 (3)添加指令 双向数据绑定 全选 删除 全删 （4）排序序号 （5）实现效果 3.代码块部分 1.内容 2.存储数据 3.添加 4.删除 5.全删 6.计算属性，数据 7.过滤数据 （如果一个数据是item，超过一个数据切换成items） 4.总结 通过键盘事件添加，当然也可以通过按钮添加，把输入框的值value 渲
TodoList的实现
xinyiddd的博客
12-30 547
文章目录前言一、React 事件处理二、事件用法三、例子TodoList总结 前言 上次我们说了React的目录的结构介绍、组件与Props等这次我们就来说说事件处理的用法并做一个实例 一、React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法，而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法) 你不能使用返回 false 的方式阻止默认行为，你必须明确的
todolist代码
qdhwh的博客
11-05 305
初学者 自己写的，不是完美版本 <template> <div> <div> <input type="text" v-model.trim="value" @keydown.enter="add"> </div> <h2>正在进行：{{no}}</h2> <ul> <li v-for="(item,index) in list" :key="in
ToDoList的实现
nanxing的博客
07-11 1768
ToDoList的实现 效果图 需要有一个输入框，可以输入文本并添加到今日计划中 .可以将今日计划勾选完成 .可以删除指定的计划 数据实现持久化，避免浏览器刷新后数据不丢失 部分代码还是一样的，我就没提取出去做一个单独的函数了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
todolist项目代码
02-27
利用vue.js框架写的一个todolist待办事项，本项目利用vue.js技术，很适合学习vue.js的小伙伴。
SwiftUI TodoList任务代办完整代码
12-08
这个"SwiftUI TodoList任务代办完整代码"提供了使用SwiftUI构建一个简单待办事项应用的全部源码，旨在帮助开发者理解和实践SwiftUI的基本用法。以下是基于该主题的详细知识点： 1. **SwiftUI基础概念**：SwiftUI是...
使用HTML、CSS实现博客系统页面、表白墙页面和TodoList页面的设计代码。
04-18
让我们详细探讨这三个页面的设计和实现过程。 首先，HTML是网页的骨架，定义了页面的基本结构和内容。在博客系统页面中，HTML将用于创建标题、文章段落、评论区、导航栏等元素。例如，`<header>`用于顶部导航，`...
Vue实现todolist删除功能
08-27
下面我们将详细解释相关代码并解析其实现过程。 首先，我们来看一下HTML部分，这是Vue应用的基本结构： ```html 提交 v-for="(item, index) in list" :key="index" :content="item" :index="index" @...
React-redux实现小案例（todolist）的过程
12-13
注：以下列出主要页面代码，为说明React-redux实现的过程，所以并没有将案例的完整代码展示！ 一、全局安装：rudux、react-redux npm install redux --save npm install react-redux 二、主要代码： 1、项目的...
TodoList源代码
02-27
参考：Android学习小Demo（10）ToDoList的改进版之ViewPager显示多个图片
todolist源码
03-31
todolist的源码，这个工具自己用了很久，所以很有兴趣去官方网站下载了源码进行编译，推荐给其他同好玩玩。
ToDoList:一个用 Java 编写的轻量级 ToDo List 小程序
06-04
待办事项列表 一个用 Java 编写的轻量级 ToDo List 小程序 它是什么？ 这是一个轻量级的待办事项列表编辑器，旨在帮助列出有待完成的事情。 它授予用户添加、编辑和删除具有描述、日期和完成字段的事件的能力。 也可以不输入显示“TBD”的日期。 它是做什么用的？ 任何总是有事情要做而没有时间跟踪所有事情的人 是什么让它独一无二？ 真的没什么。 指示 输入事件的文本描述，然后是该事件应该完成的公历日期（通常是未来）以及优​​先级。 可以通过右键单击事件并选择“编辑”来编辑事件。 该列表会在每次使用时自动保存并重新打开，但也可以导出以在另一台机器或其他机器上使用。 同样，列表可以导入和合并，您可以清除整个列表，所有这些都来自文件菜单 截图
Vue3.x 实现一个完整的toDoList
最新发布
06-05
在本项目中，我们主要利用Vue3.x框架来构建一个完整的toDoList应用程序，并实现类似于京东App中的搜索缓存功能。Vue3.x是Vue.js框架的最新版本，它引入了许多新特性和性能优化，使得开发过程更为高效和简洁。下面...
todolist实现添加及排序
SherryStar的博客
09-25 524
实现效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
【jQuery】todoList的实现教程
3476511424@qq.com的博客
10-13 447
jq内容 作品的完整代码：下载链接🔗 已勾选和未勾选的数据分在待办和已完成两个部分 修改某一个词条的信息
JavaScript（四）——实现ToDoList
Geng_____的博客
06-06 729
使用Javascript实现todolist部分功能
实现todoList的功能
weixin_30243533的博客
07-06 377
1.准备工作 1>新建一个项目 ng new "文件名" 2>新建一个组件search ng g component components/search 3>注意在app.component.html中引入app-search容器（当标签使用） 4>项目启动命令 ng serve --open 2. 转载于:https://ww...
todolist效果实现
akuaiqwewqe的博客
09-28 2020
效果展示 一，说明：todolist实现 ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用! 要用到的只要技术有： element组件库 filter过滤 v-for 二，过程：todolist过程 todolist效果概要： 1.实现回车保存数据 2.实现全选反选效果 3.单选改为完成 4.选中删除 5.计算上传条...
使用Redux实现的React todoList进阶教程
实现过程中，我们首先会创建Redux的store，它会结合所有的reducer来处理应用中的状态变化。reducer是纯函数，根据当前状态和action返回新的状态。 接着，我们会创建React组件来展示和操作这些数据。比如，`TaskList...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值