todolist（网页版记事本）

用户可以在输入框中输入一个周期内需要做的事情，在按下回车时会保存至本地存储，即使浏览器关闭也不会丢失数据

注：该案例需引入jquery.min.js，请提前下载

tudolist.html（首页结构代码）

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><metaname="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><inputtype="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></body>
</html>

tudolist.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);//   toDoList 本地存储数据渲染加载到页面load();$(this).val("");}}});// toDoList 删除操作$("ol, ul").on("click", "a", function () {// 先获取本地存储的数据var data = getDate();// console.log(data);// 修改数据var index = $(this).attr("id");// console.log(index);data.splice(index, 1);// 保存到本地存储saveDate(data);// 重新渲染页面load();});// 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");// 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);}
});

todolist（网页版记事本）相关推荐

网页版MC服务器搭建+汉化
前言不知道大家最近有没有听说有人把mc的java版代码反编译成了js代码,然后嵌入到了网页当中呢发布了mc的网页版.有兴趣的同学可以去这里看看.好了,全剧终. 当大家开始游玩的时候是不是发现了一个 ...
通过 railway 和 code-server 搭建网页版的 visual studio code
背景和需求我有一个 iPad 平板, 平时出门碎片时间在 leetcode 和 binarysearch 上刷题[1], 因为可以直接在网页里敲代码. 除了用一些SSH Terminal[2]远程登 ...
能做pc网页吗_梦幻西游网页版：如今还能抽金伙伴吗？玩家亲自验证，感觉还行...
说起"金伙伴",相信各位玩家并不陌生.作为梦幻西游网页版中的强力助手,他们的各方面表现相当优秀,因此不少玩家都想抽到.然而,越珍贵的东西就越难抽出来,想要在荟英楼看到金伙伴,并不是 ...
如何打印网页版的发票_梦幻西游网页版：陷入瓶颈期，如何快速提升战力？氪金能解决问题...
在梦幻西游网页版中,战力的高低直接影响着玩家的游戏体验,因此大家都将注意力放到了这上面.然而,提升战力并非易事,随着等级越来越高,难度也会逐渐提升.前不久,就有一位玩家遇到了麻烦,据他描述,目前的战力 ...
Python 写了一个网页版的「P图软件」，惊呆了！
作者 | 小欣来源 | Python爱好者集中营今天是开工第一天,这篇文章可以算作是虎年的第一篇干货技术类文章了,今天小编用Python做了一个网页版的"P图软件",大致的流程 ...
Facebook的一些基本操作（网页版）
这篇文章主要讲的是利用 JavaScript SDK 进行Facebook的登录,点赞和分享功能. 前期准备 1,注册一次Facebook账号,新建一个应用取到应用id 2,引进Facebook的SD ...
r语言服务器网页版ide RStudio Server 简介
目录介绍安装R 安装RStudio Server 创建账号开始使用注意事项无法打开登录页多用户使用服务卡死端口占用外网使用终端工具推荐 RStudio Server是网页版的RSt ...
真香！使用 Goland 网页版实现真正的云开发
云原生玩家往往都是左手 MacBook,右手 Goland,但由于大部分人的 MacBook 硬件资源有限,基本上无法丝滑地使用 Goland.即使你是 8C16G 的高富帅,多开几个 PornHub ...
vue中进行判断不同字段的判断，主要是区分于微信小程序和网页版之间写法
1 网页版的vue字段的判断的写法如下: v-if="item.scoreItemState == 0" v-if="item.scoreItemState == 1&q ...

todolist（网页版记事本）

todolist（网页版记事本）相关推荐

最新文章

热门文章