怎么用java做todolist_[Java教程]JavaScript jQuery 任务清单 ToDoList
[Java教程]JavaScript jQuery 任务清单 ToDoList
0 2020-10-23 03:02:01
代码实现:
ToDoList.html(复制并保存为html文件,打开即可见效果):
ToDoList—最简单的待办事项列表ToDoList
正在进行
已经完成
ToDoList.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; }}
ToDoList.js$(function() { // 页面每次加载,就自动渲染一次数据 load(); $("#title").on("keydown", function(event) { // 判断用户按下了回车键(13) if (event.keyCode == 13) { if ($(this).val() == "") { alert("请输入待办事项!"); } else { // 先读取本地存取原来的数据 var local = getData(); // 把最新的数据追加给local local.push({ title: $(this).val(), done: false }); // 把local存到本地存储 saveData(local); load(); // 加载完毕后删除input中的文本 $(this).val(""); } } }); //删除操作 $("ol,ul").on("click", "a", function() { // 获取本地存储 var data = getData(); // 修改数据 var index = $(this).attr("id"); // console.log(index); // 元素.splice(从第几个位置开始删除,删除几个) data.splice(index, 1); // 保存到本地存储 saveData(data); // 重新渲染页面 load(); }); // 正在进行、已经完成操作 $("ol,ul").on("click", "input", function() { var data = getData(); var index = $(this).siblings("a").attr("id"); // console.log(index); data[index].done = $(this).prop("checked"); saveData(data); load(); }); // 读取本地存储的数据 function getData() { var data = localStorage.getItem("todolist"); if (data !== null) { // 本地存储的数据格式是字符串,需要转化成对象 return JSON.parse(data); } else { return []; } } // 保存本地存储数据 function saveData(data) { // 存储前要转化为字符串 localStorage.setItem("todolist", JSON.stringify(data)); } // 渲染加载数据 function load() { var data = getData(); // console.log(data); // 遍历之前先清空ol和ul里的内容 $("ol,ul").empty(); var todoCount = 0; // 正在进行的个数 var doneCount = 0; // 已完成的个数 // 遍历数据data $.each(data, function(i, n) { // console.log(n); // 追加数据,并创建自定义id索引号 if (n.done) { $("ul").prepend("
" + n.title + "
"); doneCount++; } else { $("ol").prepend("
" + n.title + "
"); todoCount++; } }); // 修改显示的个数 $("#todocount").text(todoCount); $("#donecount").text(doneCount); }}); 本文网址:http://www.shaoqun.com/a/481773.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
JavaScript
0
怎么用java做todolist_[Java教程]JavaScript jQuery 任务清单 ToDoList相关推荐
- html任务清单源码,JavaScript jQuery 任务清单 ToDoList
代码实现: ToDoList.html(复制并保存为html文件,打开即可见效果): <!DOCTYPE html> <html> <head> <meta ...
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- java引用类型和值类型_[Java教程]JavaScript中值类型和引用类型的区别
[Java教程]JavaScript中值类型和引用类型的区别 0 2017-02-24 00:00:35 JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和 ...
- java中分支_[Java教程]JavaScript中的分支结构
[Java教程]JavaScript中的分支结构 0 2016-06-30 23:03:37 说到JavaScript中的分支结构,我们就不得不提到流程控制这个词,我们所有的程序都是由数据和算法组成的 ...
- Java数组去重的多种方法,[Java教程]JavaScript常见的五种数组去重的方式
[Java教程]JavaScript常见的五种数组去重的方式 0 2016-12-14 15:00:17 ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 ...
- 遍历 in java_[Java教程]JavaScript中遍历数组 最好不要使用 for in 遍历
[Java教程]JavaScript中遍历数组 最好不要使用 for in 遍历 0 2017-01-14 00:01:52 先看一段代码1 2 3 4 5 Document 6 7 8 9 21 2 ...
- java中的感叹号是_[Java教程]javascript中的2个感叹号的用法
[Java教程]javascript中的2个感叹号的用法 0 2014-04-15 19:00:09 !!是逻辑"非非",即是在逻辑"非"的基础上再" ...
- java中table是什么标签_[Java教程]javascript格式化table标签内容
[Java教程]javascript格式化table标签内容 0 2015-07-12 20:00:08 项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table ...
- java js 转换_[Java教程]javascript 类型转换。
[Java教程]javascript 类型转换. 0 2016-10-11 18:00:06 目录: 1 : 伪对象 2 : 转换为字符串 3 : 数字转字符串 4 : 转换为数字 5 : 转换为Bo ...
最新文章
- 习题8-6 删除字符 (20 分)
- 如何用PHP写商品折扣_秒杀抢购时的超发,你用php如何优化的
- 【程序员の英文听写】Trump’s Totally Not Weird Way of Standing | The Daily Social Distancing Show
- 游戏编程入门之绘制动画的精灵(爆炸特效)
- linux捕获其他进程信号,linux进程如何捕获信号
- qt linux 添加库文件路径,Linux下Qt调用共享库文件.so
- Java设计模式笔记(3)抽象工厂模式
- Linux centos7 安装 MySQL5.7.x
- ant-pro使用Form表单验证上传图片出现的问题
- C/C++——getline()详解
- 华为鸿蒙系统学习笔记11-鸿蒙(HarmonyOS)2.0方舟编译器官方网址开源地址
- 英伟达发布迁移学习工具包,现在可以申请早期试用
- Serv-U和win2003防火墙的设置
- python合并多个pdf文件
- APDL电磁仿真学习中可能会遇到的问题1
- 移动UI设计-表单设计
- 使用正则表达式 匹配 HTML 标签内的内容
- 常用数据库优化方案(二)
- 如何打造高效的团队(五)- 文化
- 海思芯片文件及查看方法
热门文章
- python代码命令行tab补齐_超简python命令行tab一键补全方法
- java生成一条唯一的邀请码_根据用户id生成一个唯一邀请码
- pandas怎么去除nan_pandas缺失值处理之——如何消去Nan值对数字型字符串数据类型的影响,让数字型字符串保持原始str类型,而不会自动变为float类型?...
- java怎么返回上一部,如何返回数据给上一个活动
- wordpress虚拟服务器,西部数码虚拟主机安装wordpress教程
- map.setTerrain is not a function
- python 表格格式输出_简单介绍python输出列表元素的所有排列形式
- editor修改样式 vue_vue修改富文本中的元素样式
- anaconda安装numpy_Python3.8如何安装Numpy
- Linux系统和windows系统mysql5.7.32的下载