toDoList开发实例

最新推荐文章于 2022-10-16 21:05:05 发布
最新推荐文章于 2022-10-16 21:05:05 发布
阅读量293 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40660787/article/details/105182838
版权 
<!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">
		<style>
			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;
			    }
			}
		</style>
		<script src="js/jquery.min.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; 2014 todolist.cn
		</footer>
		<script>
			$(function() {
				// 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();
							// 把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() {
					// 先获取本地存储
					var data = getDate();
					// 修改数据
					var index = $(this).attr("id");
					data.splice(index, 1);
					// 保存到本地存储
					saveDate(data);
					// 重新渲染页面
					load();
				});
				// 4. toDoList 正在进行和已完成选项操作
				$("ol, ul").on("click", "input", function() {
					// 先获取本地存储的数据
					var data = getDate();
					// 修改数据
					var index = $(this).siblings("a").attr("id");
					// data[?].done = ?
					data[index].done = $(this).prop("checked");
					// 保存到本地存储
					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();
					// 遍历之前先要清空ol里面的元素内容
					$("ol, ul").empty();
					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>
	</body>
</html>

 

 
无区新手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
经典案例-todoList
测试开发架构师
04-08 1221
经典案例-todoList 一、案例介绍 todolist主要是实现添加日程，设置日程为完成，清除完成的日志等等 本案例是一个非常经典的案例，会把之前学得的很多知识都可以深度的运用起来 这里使用组件化的思想，如下图，框框 框起来的作为一个组件，划分组件最合适就好，并不是越多越好 二、案例实现 2.1、划分组件 按上面红框，我们可以划分为几块组件：最上面的绿框我们定义为Header，中间的我们定义为List，下面的是Footer，中间List里面的一条记录我们定义为Item： 2.2、
ToDoList案例（重要）
weixin_50119334的博客
10-17 1233
ToDoList案例 1.文本框里面输入内容，按下回车，就可以生成代办事项 2.点击代办事项复选框，就可以把当前数据添加到已完成事项里面 3.点击已完成事项复选框，就可以把当前数据添加到代办事项中 4.但是本页面内容不会丢失 分析： 1.刷新页面不会丢失数据，因此需要用到本地存储locastorage 2.核心思路：不管按下回车还是点击复选框，都是把本地存储加载到页面中，这样保证书信关闭页面不会丢失数据。 3.存储的数据格式： var todolist = [ { title : ‘xxx’ done
6. toDoList案例
s12345672的博客
10-22 969
toDoList.js $(function () { load(); // 1. 按下回车键，把完整数据存储到本地存储里面 // 存储数据的格式：var todolist = [{title:"xxx",done:false}] $("#title").on("keydown", function (event) { // 判断用户是否按下的是回车键 if (event.keyCode === 13) { ...
vue简单实例（todolist）
Queen_zdd的博客
10-25 690
本实例运用vue的一些常用指令如：v-for,v-on,v-model等； v-on:click=”“可简写为@click=“”vue+bootstrap实战注：bootstrap是基于jQuery的，所以引入bootstrap的同时，需引入jQuery。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <
TodoList例子笔记
wyr0924的专栏
01-25 715
A、B viewcontroller之间前进后退： A->B 右键拖动A的一个button到B上即可 在A中重写prepareForSegue可以在跳转的时候被调用到 [segue destinationViewController] B退回到A： 在A中写个unwind函数，当然函数名要清晰，例如unwindB之类的 -(IBAction)unwindB:(UIStoryboardSeu
vue.js实例todoList项目
10-19
Vue.js 是一个流行的前端JavaScript框架，它用于构建用户界面，具有数据绑定和组件化的特点。在本篇文章中，我们将深入探讨如何...同时，这也是一个很好的起点，可以帮助开发者进一步学习更复杂的Vue.js应用程序开发。
利用Flutter开发TodoList指南
08-10
在本文中，我们将深入探讨如何使用Flutter框架来开发一个功能完备的TodoList应用程序。Flutter是由Google推出的开源UI工具包，它允许开发者用一种语言——Dart，构建原生的iOS和Android应用。作为JavaScript的补充，...
vue搭建todolist
03-27
在这个TodoList应用中，Vue实例用于管理应用的状态，包括待办事项的增删改查。 - **数据绑定**：Vue使用双大括号`{{ }}`进行数据绑定，实现视图与模型的同步。例如，`{{ item.text }}`用于显示每个待办事项的文本。...
详解vuex的简单todolist例子
10-16
Vuex是一个专为Vue.js应用程序开发的的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools extension，提供了...
Vue TodoList案例
09-02
在这个TodoList案例中，Vue实例会管理所有待办事项的数据和行为。 2. **数据绑定**：Vue采用双向数据绑定，使得视图和模型之间保持同步。在TodoList中，当你在输入框中输入新任务时，数据会自动更新到Vue实例的data...
todolist待办事项
03-19
本人设计，制作的简单的待办事项todolist，包括前台页面，后台程序。功能齐全。供行业类参考
微信小程序 toDoList源码范例.rar
07-10
微信小程序 toDoList源码范例，包括了列表页面、添加和删除数据界面，详情页面、模块化测试等功能。 　　inputA 是一个输入框，当我提交数据的时候，需要清除表单的数据，setData不能清除很好的清除。使用了一些ES语法，请查看**/utils/test.js**,实现了类似汉字转拼音的效果。 　　wx.request发起的是https请求。一个微信小程序，同时只能有5个网络请求连接。在测试wx.request的时候.wx.request post传参数，开发者服务器取不到参数。我在测试的时候发现一个问题。post数据的时候一直不成功。经过查看文档得出结论。需要加一段代码，具体内祥。 　　几点Bug： 　　本地没资源不无法通过css获龋可以使用网络图片，或者base64 　　app.json文件下的pages配置不能重复 　　宽高设置百分比无效果 　　this与that：this.setData报错 　　post 请求数据 　　修改域名配置的时候有bug. 重启项目
微信小程序ToDolist
08-10
微信小程序のToDolist
方便好用的待办事务小工具 todolist
07-23
windows可以使用的todolist小工具，管理一些待办事项很方便 分享出来给大家使用
TodoList经典案例
最新发布
red_HTML的博客
10-16 912
头部使用v-model来双向绑定title@keydown.enter="show" 绑定键盘回车事件下载nanoid之后 引入import {nanoid} from 'nanoid'得要在v-model上面添加 ，trim清除空格!this.title 代表空的时候弹出 alert引入App.vue时要this.函数名（）
TodoList开发
jianjian_5201314的博客
10-25 369
通过制作功能模块，可以复习基础知识，同时可以延展出新的知识点。 1.首先写最简单的TodoList结构 希望输入内容，点击提交，提交项能显示在列表之中 因为列表为空，所以显示内容为空。 思路？ 接着当用户点击提交按钮的时候，让它显示在列表之中。以前的操作需要操作dom,现在是在写数据。 只需要在用户点击提交的时候，把input框里的内容，放入list这个数组里面。数组有内容，li标签就会自动的循环，把数组的内容显示出来。 ...
demo ‘todolist’项目开发
weixin_30823833的博客
07-04 195
todolist-site-----------主文件夹 　　css------------css文件文件夹 　　　　header.css---主页面头部样式css section.css---主页面内容样式css footer.css---主页面尾部样式css 　　　　reset.css---清除默认样式css 　　js-----------...
React入门：开发一个简单的TodoList应用
wxm1780936497的博客
02-23 334
准备工作 安装nodejs和npm,设置淘宝镜像等，自行百度。 使用react脚手架来搭建应用 npx craet-react-app appName 执行完得到以下目录结构： 在安装目录下执行npm start，会在浏览器打开localhost:3000: 开始编写 先在src下新建一个TodoItem文件： import React,{Component} from 'react'; ...
Vue2 实例解析：尚硅谷教程的 ToDoList 案例分析
"Vue2教程，通过尚硅谷的ToDoList案例学习Vue的功能实例，包括前端框架、JavaScript和ECMAScript的应用。" 在本教程中，我们将深入探讨如何使用Vue2来构建一个基本的ToDoList应用。这个案例主要分为以下几个部分： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值