JQuery实现任务清单案例

效果图：

1.输入任务计划，不能为空
2.点击添加 会在任务栏添加任务记录 同时输入框内容消失
3.点击复选框 表示任务完成  任务消失保存在下方的 已完成任务栏里
4.点击隐藏、显示已完成任务 显示淡入淡出效果
代码：
<!DOCTYPE html>
<html><head><title></title><meta charset="UTF-8"><script src="./jq183.js"></script><style>#box {width: 400px;margin: 0 auto;}#show {font-size: 12px;}span {font-size: 12px;background-color: #F0FFF0;}s {font-size: 12px;color: #7B7B7B;background-color: #F0F0F0;}</style>
</head>
<body>
<div id="box"><!--添加任务  --><input type="text" value="" style="width:300px" id="list_value"><input type="button" value="添加任务" id="add"><!--任务列表  --><div class="lists"></div><hr><!--显示与隐藏  --><div><p id="show">显示已完成任务</p></div><!--已完成任务的列表  --><div id="hide"></div>
</div>
</body>
<script>$('#add').click(function(){var n= $('#list_value').val();//获取输入框里的值var t='<div> <input type="checkbox" id="t2"><span>'+n+'</span> </div>';//构建插入待办列表//表单不能为空if(n!= ''){$('.lists').prepend(t);//$('#t2').on('click',function(){var v= $(this).next().html();//获取点击的那个input对应 span中的值var tt='<div> <s>'+v+'</s> </div>';//创建已完成 任务列表$('#hide').prepend(tt); //添加已完成列表$(this).parent().remove();//删除未完成列表});$('#list_value').val('');//情况文本框}else{alert('输入内容不能为空！')}});//已完成显示和隐藏列表$('#show').toggle(function(){$('#hide').show(2000,function(){$('#show').html('隐藏已完成任务');});},function(){$('#hide').hide(2000,function(){$('#show').html('显示已完成任务');});});</script>
</html>

JQuery实现任务清单案例相关推荐

jQuery Mobile手机网站案例
jQuery Mobile手机网站案例一.总结一句话总结:jQuery Mobile是纯手机框架,和amazeui和bootstrap都可以做手机网站. 1.另一款文本编辑器? jd编辑器二.j ...
jQuery版三级联动案例
jQuery版三级联动案例首先写一个JSON数据 [{"province": "吉林省","cities": [{"city&q ...
计算机毕业设计中用Java实现商场库存清单案例
实现商品库存清单案例步骤: 1.实现表头,是固定数据,直接写输出语句 2.表格中间,商品数据,采用变量形式,定义变量,找对数据类型,输出所有变量 3.表格尾巴,一部分数据固定,另一部分,商品数据进行 ...
python 实现任务管理清单案例
更多编程教程请到:菜鸟教程 https://www.piaodoo.com/ 友情链接: 高州阳光论坛https://www.hnthzk.com/ 人人影视http://www.sfkyty.com ...
jQuery[详解]+小案例
jQuery的总结 1.初始jQuery 2.jQuery的选择器 3.jQuery的事件和动画 4.使用jQuery操作Dom 小案例 ...
jquery 监听的案例
jQuery 简介 jQuery 是一个 JavaScript 库. jQuery 使用可以下载一个,也可以使用Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuer ...
jQuery 内容文本值|| 案例：购物车案例模块-增减商品数量 || 案例：购物车案例模块-修改商品小计
jQuery 内容文本值 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
jquery入门与实践案例教程
为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦. 遍历数组很麻烦,通常要嵌套一大堆的for循环. 有兼容性问题. 想要实现简单的动画效果,也很麻烦 ...
jQuery—淘宝精品服饰案例
<body><div class="wrapper"><ul id="left"><li><a href= ...
MVC4 jquery 样式主题用法(案例)
开发工具:VS2012 MVC版本:MVC4 MVC4已经自带了jquery,新建的项目,基本上什么都不用添加就可以运行,跑项目.(集成了那么多东西,jquery,modernizr,自带的默认权限, ...

JQuery实现任务清单案例

JQuery实现任务清单案例相关推荐

最新文章

热门文章

JQuery实现 任务清单案例

JQuery实现 任务清单案例相关推荐

最新文章

热门文章

JQuery实现任务清单案例

JQuery实现任务清单案例相关推荐