jQuery实现todolist

最新推荐文章于 2024-04-17 17:15:49 发布
最新推荐文章于 2024-04-17 17:15:49 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/108032052
版权

jQuery实现todolist

jQuery实现todolist

1、本地存储localStorage
2、jQuery实现交互

js

$(function () {
  // alert(11);
  // 1. 按下回车 把完整数据 存储到本地存储里面
  // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
  load();
  $("#title").on("keydown", function (event) {
    if (event.keyCode === 13) {
      if ($(this).val() === "") {
        alert("请输入您要的操作");
      } else {
        // 先读取本地存储原来的数据
        var local = getDate();
        // console.log(local);
        // 把local数组进行更新数据 把最新的数据追加给local数组
        local.push({
          title: $(this).val(),
          done: false
        });
        // 把这个数组local 存储给本地存储
        saveDate(local);
        // 2. toDoList 本地存储数据渲染加载到页面
        load();
        $(this).val("");
      }
    }
  });
  // 3. toDoList 删除操作
  $("ol, ul").on("click", "a", function () {
    // alert(11);
    // 先获取本地存储
    var data = getDate();
    console.log(data);
    // 修改数据
    var index = $(this).attr("id");
    console.log(index);
    data.splice(index, 1);
    // 保存到本地存储
    saveDate(data);
    // 重新渲染页面
    load();
  });
  
  // 4. toDoList 正在进行和已完成选项操作
  $("ol, ul").on("click", "input", function () {
    // alert(11);
    // 先获取本地存储的数据
    var data = getDate();
    // 修改数据
    var index = $(this).siblings("a").attr("id");
    console.log(index);
    // data[?].done = ?
    data[index].done = $(this).prop("checked");
    console.log(data);

    // 保存到本地存储
    saveDate(data);
    // 重新渲染页面
    load();
  });
  
  // 读取本地存储的数据 
  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='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);
  }

})

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-scalable=no" />
  <title>ToDoList—最简单的待办事项列表</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/todolist.js"></script>
</head>

<body>
  <header>
    <section>
      <label for="title">ToDoList</label>
      <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
    </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 &copy; 2020 todolist.cn
  </footer>


</body>

</html>

css

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  background: #CDCDCD;
}

header {
  height: 50px;
  background: #333;
  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;
  }
}

效果图

在这里插入图片描述

牛先森家的牛奶
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery-todolist案例
qq_43781887的博客
07-20 486
5.注意点2获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()，我们才能使用里面的数据。6.load加载函数里面，新增一个条件，如果当前数据的done为true就是已经完成，就把列表渲染到ul里面。1.页面中的数据都要从本地存储里面获取，这样刷新页面就不会丢失数据，所以要先把数据保存到本地存储里面。2.核心原理先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li。1.点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。...
jQuery实现todolist网页功能
weixin_45658984的博客
03-03 453
今天,我用本地存储功能,实现了todolist页面 核心原理 获取用户输入的数据–保存到本地存储–再渲染到页面上 $(function() { load(); // 1,按下回车,把完整的数据存到本地存储 $('#title').on('keydown', function(e) { //按下回车按钮,判断本地...
Jquery实现简单TodoList
03-28
Jquery实现简单TodoList
【jQuery案例】todolist待办事项清单 jQuery+JS实现_jquery待办
最新发布
2401_84183545的博客
04-17 290
【代码】【jQuery案例】todolist待办事项清单 jQuery+JS实现_jquery待办。
JQuery实现to do list
qq_37086980的博客
07-14 722
JQuery实现 to do list 代码案例 $(function() { $('#title').on('keydown', function(event) { // 按下回车键保存代办事项 if (event.keyCode == 13) { // 先读取本地存储原来的数据 var local = getData(); // 更新 local 数组，追加数据 lo
jQuery实现todolist全部代码
weixin_61000863的博客
06-23 442
jQuery实现todolist全部代码
jQuery模仿ToDoList实现简单的待办事项列表
10-15
主要介绍了jQuery模仿ToDoList实现简单的待办事项列表，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery_ToDoList.rar
08-07
在本项目"jQuery_ToDoList.rar"中，我们聚焦于使用jQuery库来创建一个功能完备的待办事项列表（ToDoList）。这个应用充分利用了JavaScript的本地存储机制——localStorage，来实现数据的持久化，允许用户在浏览器...
jQuery-ToDoList.rar
05-02
在"jQuery-ToDoList"案例中，我们能看到jQuery如何优雅地实现添加、删除和编辑待办事项。例如，使用`$(selector).append()`方法可以在页面上动态插入新的元素，而`$(element).remove()`则可以轻松移除不再需要的元素...
用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实现Todolist
weixin_52063946的博客
08-12 422
核心思路： 为了防止页面刷新时数据丢失，我们可以把数据保存到我们的本地存储 localStorage 里面。因为在我们的localStorage 中，数据是以字符串格式存储的，但是我们的数据列表是一个数组（对象），因此我们在把数据存放到localStorage 中时，要先用 JSON.stringify() 方法 把数据转换成字符串形式，同理，我们在读取数据时，也要做一个转换，用JSON.parse() 方法把所获取的数据格式转换成对象格式的。 1、我们封装了3个函数： ge...
【jQuery】todoList的实现教程
3476511424@qq.com的博客
10-13 436
jq内容 作品的完整代码：下载链接🔗 已勾选和未勾选的数据分在待办和已完成两个部分 修改某一个词条的信息
使用jQuery制作todolist
AmyGeng123的博客
10-06 524
使用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
m0_45659764的博客
05-17 466
--------------------------------------------------本地存储格式------------------------------------------------------------ 注意： 刷新、关闭浏览器都不会丢失数据，所以使用本地存储localStorage 虽然看起来像是直接回车，直接点击的事儿，但是，其中的过程都是先把数据存储到本地存储中，再从本地存储取出数据显示到页面 因为数据很多，所以本地存储的数据采用对象数组的形式 因为本...
jQuery案例: toDoList
weixin_46048542的博客
07-11 559
案例: toDoList ①文本框里面输入内容,按下回车,就可以生成待办事项。 ②点击待办事项复选框,就可以把当前数据添加到完成事项里面。 ③点击已完成事项复选框,就可以把当前数据添加到待办事项里面。 ④但是本页面内容刷新页面不会丢失。 根据黑马视频（pink老师）的教程写的todolist项目记录 https://www.bilibili.com/video/BV1a4411w7Gx 老师的素材地址 https://gitee.com/xiaoqiang001/jquery/tree/master/①
用JQuery实现todolist记录清单（包含本地存储）案例
qq_34306228的博客
04-08 768
用JQuery实现todolist记录清单（包含本地存储）案例步骤全部代码成果展示 步骤 刷新页面，不会丢失数据，因此需要用到本地存储localStorage 数据先放到本地存储中，再渲染css 存储数据格式：本地存储只能存储字符串的数据格式 数组对象转换成字符串格式 JSON.stringify() localStorage.setItem("todo",JSON.stringify(todolist)); 获取本地存储的数据，我们需要把里面的字符串数据转换为对象格式 JSON.parse()
jQuery实现todoList案例
benlalagang的博客
07-26 124
jquery实现todoList案例
jquery完成todolist
06-13
以下是一个简单的用jQuery完成的todo list示例： ... ``` <h1>Todo List <button id="addBtn">Add <ul id="list"></ul> ...以上代码实现了添加新的todo项、删除已有的todo项、标记为已完成的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值