todolist待办事项的编写

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

功能实现:

  • 1.在顶部输入内容,添加到正在进行列表;
  • 2.点击前面复选框正在进行的项目添加到已经完成里面,同时数量增加减少
  • 3.点击右边删除按钮可以删除项目;
  • 4.关闭窗口,下次进入页面载入之前的项目列表.

用到的知识:

  • 1.html+css样式
  • 2.jQuery及cookie

效果图:

在这里插入图片描述

代码示例:

//需引入jQuery插件和jQuery的cookie插件!!
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    section{
      margin: 100px auto;
      width: 400px;
      min-height: 50px;
      border: 1px solid;
    }
    dt{
      background-color: #313131;
      /* width: 100%; */
      height: 35px;
      line-height: 35px;
      color: #fff;
    }
    dt h3{
      float: left;
      font-weight: normal;
      margin-left: 5px;
    }
    dt p{
      float: right;
      margin-right: 5px;
    }
    dt p input{
      width: 200px;
      height: 20px;
      border-radius: 5px;
      border: 0;
      outline: 0;
    }
    dd .title{
      background-color: #cdcdcd;
      height: 35px;
      line-height: 35px;
      cursor: pointer;
      padding-left: 10px;
    }
    dd .title h4{
      float: left;
    }
    dd .title span{
      float: right;
      margin-right: 10px;
      margin-top: 5px;
      display: block;
      background-color: #e6e6fb;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
    }
    ul{
      background-color: #cdcdcd;
    }
    .content li{
      height: 25px;
      width: 400px;
      padding: 5px 0;
    }
    .content-main{
      /* width: 360px; */
      background-color: #fff;
      margin: 0 10px 0;
      height: 100%;
      line-height: 25px;
      border-radius: 5px;
    }
    .left{
      float: left;
    }
    .content-main .left i{
      float: left;
      display: inline-block;
      width: 5px;
      height: 25px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      background-color: #609a9d;
    }
    .content-main .left input{
      float: left;
      margin: 6px 10px 0;
    }
    .content-main .left span{
      float: left;
      font-size: 12px;
    }
    .right{
      float: right;
    }
    .right em{
      display: block;
      margin-top: 5px;
      margin-right: 5px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #cccccc;
      text-align: center;
      line-height: 15px;
      padding-right:3px ;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
    }
    #complete-content .content-main{
      background-color: #e6e6e6;
    }
    
  </style>
</head>
<body>
  <section>
    <dl>
      <dt>
        <h3>ToDoList</h3>
        <p><input type="text" placeholder="添加ToDo" id="addList"></p>
      </dt>
      <dd>
        <div class="title"><h4>正在进行</h4><span id="going-num">0</span></div>
        <div class="content" id="going-content">
          <ul>
            <!-- <li class="content-list"><div class="content-main">
              <div class="left"><i></i><input type="checkbox" class="going-content-input"><span>今天我要学习jQuery</span>
              </div>
              <div class="right"><em id="del">-</em></div>
            </div></li> -->
          </ul>
        </div>
      </dd>
      <dd>
        <div class="title"><h4>已经完成</h4><span id="complete-num">0</span></div>
        <div class="content" id="complete-content">
          <ul></ul>
        </div>
      </dd>
    </dl>
  </section>
</body>
</html>
<script src="jQuery.js"></script>
<script src="jquery.cookie-1.4.1.min.js"></script>
<script>
  $(function(){
    let going_num = 0;
    let complete_num = 0;
    //判断有无cookie
    if($.cookie("going")){
      let arrGoing = $.cookie("going").split(";");
      going_num = arrGoing.length;
      $("#going-num").text(going_num);
      $.each(arrGoing,function(i,val){
        $("#going-content ul").append(`<li class="content-list"><div class="content-main">
          <div class="left"><i></i><input type="checkbox" class="going-content-input"><span>${val}</span>
              </div>
            <div class="right"><em id="del">-</em></div>
          </div></li>`);
      });
    }
    if($.cookie("complete")){
      let arrComplete = $.cookie("complete").split(";");
      complete_num = arrComplete.length;
      $("#complete-num").text(complete_num);
      $.each(arrComplete,function(i,val){
        $("#complete-content ul").append(`<li class="content-list"><div class="content-main">
          <div class="left"><i></i><input type="checkbox" class="going-content-input" checked="checked"><span>${val}</span>
              </div>
            <div class="right"><em id="del">-</em></div>
          </div></li>`);
      });
    }
		// 载入cookie后删除cookie
		$.removeCookie("going");
		$.removeCookie("complete");
    //点击添加
    $("#addList").keydown(function (e) {
      if (e.keyCode == 13 && $(this).val() != "") {
        $("#going-content ul").append(`<li class="content-list"><div class="content-main">
          <div class="left"><i></i><input type="checkbox" class="going-content-input"><span>${$("#addList").val()}</span>
              </div>
            <div class="right"><em id="del">-</em></div>
          </div></li>`);
        going_num++;
        $("#going-num").text(going_num);
        $(this).val("");
        
      }
			dodo(); 
    });
    dodo();
    function dodo(){
			//点击正在进行复选框
        $("#going-content .going-content-input").off().click(function () {
        let oLi = $(this).parent().parent().parent().html();
        console.log(oLi);
        $("#complete-content ul").append(`
      <li class="content-list">${oLi}</li>
      `);
        $("#complete-content .going-content-input").attr("checked", true);
        complete_num++;
        $("#complete-num").text(complete_num);
        going_num--;
        $("#going-num").text(going_num);
        $(this).parents(".content-list").remove();
				
				del();
      });
			//点击正在进行删除框
      $("#going-content #del").off().click(function () {
        going_num--;
        $("#going-num").text(going_num);
        $(this).parents(".content-list").remove();
      });
			
			del();
      
    }
		//点击删除
		function del(){
			$("#complete-content #del").off().click(function () {
			  complete_num--;
			  $("#complete-num").text(complete_num);
			  $(this).parents(".content-list").remove();
			});
		}
		
		window.onbeforeunload = function(){
			$("#going-content ul li").each(function(i,ele){
				if($.cookie("going")){
					$.cookie("going",$.cookie("going") + ";" + $(ele).find(".content-main").find(".left").find("span").text(),{expires:7});
				}else{
					$.cookie("going",$(ele).find(".content-main").find(".left").find("span").text(),{expires:7});
				}
			});
			$("#complete-content ul li").each(function(i,ele){
				if($.cookie("complete")){
					$.cookie("complete",$.cookie("complete") + ";" + $(ele).find(".content-main").find(".left").find("span").text(),{expires:7});
				}else{
					$.cookie("complete",$(ele).find(".content-main").find(".left").find("span").text(),{expires:7});
				}
			});
		}
  });
</script>
maya1024
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ToDoList待办事项列表 Vue3 Spring boot
qq_46239972的博客
11-30 1890
ToDoList待办事项列表 主要功能： 对待办事项进行增删改查操作; 显示待办事项的进行中或已完成的状态并显示进行中的待办事项距离结束时间的时间; 待办事项任务到达预定时间后会自动发送windows通知; 切换中英文的功能 使用到的相关技术： 前端： Element UI、TypeScript、Sass、Axios、Vue3、Vue-Router、Vue-i18n 后端： Java、Spring boot2、MySQL、Mybatis、Maven 使用的开发环境： Windows、IDEA、VS-Cod
todoList:待办事项清单
07-14
在IT行业中，待办事项清单（Todo List）是一种常见的应用场景，尤其在软件开发和项目管理中，它扮演着至关重要的角色。在这个场景中，我们关注的是一个名为"todoList"的项目，它很可能是一个用JavaScript编写的轻量...
待办事项列表todoList程序
12-21
使用jQuery及javascript，配合HTML5的本地存储localStorage，实现待办事项列表todoList的页面及程序控制逻辑，完成todolist程序的编写。
jQuery案例 —— todoList待办事项列表
爱前端的程序媛的博客
05-10 1077
案例时间 这个案例前几天就看了，一直没时间做，今天就把它做出来。这个案例是一个待办事项列表，可以记录自己当天需要做的事情，完成一件就画勾，要是不想要了就删除，可以很好的督促自己完成每天的学习任务啊。看下效果吧。 当我第一次看到这个效果时，从局部出发，我的第一反应就是点击事件的删除和添加操作。但是看视频的时候老师做了需求分析，很仔细的分析了案例的效果，事实证明并没有我想的那么简单。确实是添加删除元素的操作，只是对象变了，不是父元素创造元素再添加元素的步骤，而是对存储的操作，最后把存储中的数据渲染到页面。第一
ToDoList代办事项
小白小白从不日别的博客
05-01 609
关于这个案例在这里就不具体去阐明了，具体说明代码里都有 <body> <!-- 1.文本框里面输入内容，按下回车，就可以自动生成代办事项 2.点击待办事项复选框，就可以把当前数据添加到已完成事项里 3.点击已完成事项复选框，就可以把当前数据添加到代办事项里 4.但是本页面的内容在刷新后或者浏览器关闭重启都不会丢失 注意点： 1.数据存储的时候应该为字符串格式 JSON.stringify() 2.获取本地存储的数据，我们需要把字符串转换为 对象格式 J
Vue基础入门，TodoList编写
GzxNgu的博客
12-07 330
Vue基础入门，TodoList编写前言基础篇（语法）TodoList 编写过程： 这一步实现了数据的新增注册我们的自定义组件并使用它完成点击删除节点功能完成版代码： 前言 本人最近开始学习 Vue 因希望自己坚持下去 不半途而废 故写下自己的学习过程以及心得体会，若有错误的地方，望各位批评指正。 初学Vue，与学习React一样 自然少不了TodoList的编写，在记录一些基础语法后，笔者会记录如何用Vue编写一个TodoList。 基础篇（语法） Vue的基础指令： 数据遍历：v-for
用vue.js写案例——ToDoList待办事项 （步骤和全码解析）
最新发布
m0_73490019的博客
04-08 8859
首先在ToDoMain组件中声明并触发自定义事件，传递参数 6 id，接着在App组件中监听自定义事件，当自定义事件被触发时，执行对应的方法，进 行删除操作，删除任务的具体实现步骤如下。单击切换状态区域时，默认状态为all，即显示全部任务，当状态切换为active时， 显示未完成的任务，当状态切换为completed时，显示已完成的任务。② 新建并封装组件。App 组件为根组件，数据在App组件中，现在需要将App根组件中的初始数据传递 到列表区域，ToDoMain组件中。
React-ToDoList:React中的待办事项列表
05-10
在本文中，我们将深入探讨如何使用React来构建一个基本的待办事项列表（ToDoList）。React是Facebook开发的一个流行的JavaScript库，它专门用于构建用户界面，尤其是单页应用程序（SPA）。利用React，我们可以轻松地...
react-todolist:用React编写的待办事项清单
05-07
这个"react-todolist"项目是基于React构建的一个基本的待办事项清单应用，展示了如何利用React来创建交互式的组件。让我们深入探讨一下这个项目所涉及的关键知识点。 1. **React组件**： React的核心概念是组件化...
软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.zip
03-20
这是一个基于Java和Vue技术栈的毕业设计项目，主要实现了待办事项(Todo List)的管理功能，涵盖了前端和后端的完整源码。这个系统旨在帮助用户高效地组织和跟踪他们的待办事项，通过前后端交互实现数据的增删改查。 ...
todolist：代码挑战的待办事项列表应用程序
02-17
待办事项清单应用程式 带有Spring Boot，React和MySQL的待办事项清单应用程序，可应对代码挑战 项目在Spring Boot上具有后端，在ReactJs上具有前端。 选择了MySQL DB。 项目已部署到Heroku和ClearDB。 您可以检查swagger-ui以获取端点说明。 特征： 用户注册 登录 注意添加/检查/删除 链接： ： 技术栈： Java 8 Maven Sprint Boot 冬眠 智威汤逊 ReactJs MySQL Lombok 昂首阔步 JUnit的 项目结构
jQuery模仿ToDoList实现简单的待办事项列表
10-15
主要介绍了jQuery模仿ToDoList实现简单的待办事项列表，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
todolist：简单的待办事项列表页面。 我的第一次Cookie体验
02-23
todolist：简单的待办事项列表页面。 我的第一次Cookie体验
todolist项目，js原生入门项目
12-21
使用原生javascript技术实现了简单的增删改查功能，使用了localstorage本地存储。
todolist待办事项
03-19
本人设计，制作的简单的待办事项todolist，包括前台页面，后台程序。功能齐全。供行业类参考
【bootstrap+Vue编写todoList】
weixin_42160554的博客
10-26 266
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js" &gt;&am
TodoList添加列表功能编写
all_might1的博客
07-21 750
index.js import React from 'react'; //加载React库 import ReactDOM from 'react-dom'; import './index.css'; import TodoList from './TodoList'; //ReactDOM会将TodoList组件挂载到页面的DOM节点上，将其渲染到HTML的root标签中 ReactDOM.render(<TodoList />,document.getEle
TodoList开发
jianjian_5201314的博客
10-25 402
通过制作功能模块，可以复习基础知识，同时可以延展出新的知识点。 1.首先写最简单的TodoList结构 希望输入内容，点击提交，提交项能显示在列表之中 因为列表为空，所以显示内容为空。 思路？ 接着当用户点击提交按钮的时候，让它显示在列表之中。以前的操作需要操作dom,现在是在写数据。 只需要在用户点击提交的时候，把input框里的内容，放入list这个数组里面。数组有内容，li标签就会自动的循环，把数组的内容显示出来。 ...
手把手叫你做ToDoList
码媛小洋的博客
08-17 7471
ToDoList案例：案例介绍 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 但是本页面内容刷新页面不会丢失。 toDoList 分析以及注意点 刷新页面不会丢失数据，因此需要用到本地存储 localStorage。 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据。 存储的数据格式：var todolist =
使用jQuery实现ToDoList待办事项功能
这里引入了自定义的`index.css`用于定义页面布局和样式，`jquery.min.js`作为jQuery库，以及自定义的`todolist.js`文件，用于编写实现待办事项功能的JavaScript代码。 HTML结构如下： ```html ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值