头像

可增加删除的待办事项列表【原创

来源:http://www.sucaihuo.com/js/1979.html 素材火管理员 2017-05-19 22:34浏览(515) 收藏

一款简单实用的待办事项列表功能代码,可点击加号输入新的待办事项回车即可增加,鼠标滑动到每一个待办事项时出现删除按钮,可以点击删除当前待办事项,已经完成的待办事项,可以点击增加删除线并自动变灰,实际的细节功能请查看演示。
可增加删除的待办事项列表

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 14 下载资源 下载积分: 88 积分

开头引入CSS样式和jquery库,样式有两个,可以自行合并和优化:

<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

body部分写好事件容器和演示的数据,可以自行扩展,代码如下:

<div id="container">
	<h1>今日待办事项<i class="fa fa-plus"></i></h1>
	<div class="slide">
		<input type="text" placeholder="新的待办事项">
	</div>
	<ul>
		<li><span><i class="fa fa-trash-o"></i></span>6:30起床晨炼</li>
		<li><span><i class="fa fa-trash-o"></i></span>7:30洗漱完吃早餐</li>
		<li><span><i class="fa fa-trash-o"></i></span>8:00准时到公司</li>
    	<li><span><i class="fa fa-trash-o"></i></span>9:30邀约客户</li>
    	<li><span><i class="fa fa-trash-o"></i></span>10:30汇报工作</li>
	</ul>
</div>

底部绑定click事件和键盘回车事件,部分代码如下:

$("input[type='text']").on("keypress", function(){
	if(event.which == 13){
		var newItem = "<li><span><i class='fa fa-trash-o'></i></span>" + $(this).val() + "</li>";
		$("ul").append(newItem);
		$(this).val("");
	}
});

大家可以试着修改成以下的效果:

声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/1979.html
评论4
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 3楼
    05-28 11:37
    舒***畅
    结合日历做也是可以的。
  • 头像 板凳
    05-20 11:10
    舒***畅
    可以结合数据库来操作的。
  • 头像 椅子
    05-20 11:02
    jo***er
    这个功能很实用,赞一个!
  • 头像 沙发
    05-20 10:42
    to***se
    这个功能很棒哦!!!
1 2