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

来源:https://www.sucaihuo.com/js/1979.html 2017-05-19 22:34浏览(1147) 收藏

一款简单实用的待办事项列表功能代码,可点击加号输入新的待办事项回车即可增加,鼠标滑动到每一个待办事项时出现删除按钮,可以点击删除当前待办事项,已经完成的待办事项,可以点击增加删除线并自动变灰,实际的细节功能请查看演示。
可增加删除的待办事项列表
查看演示 下载资源 下载积分: 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并保留原文链接:https://www.sucaihuo.com/js/1979.html
评论0
头像

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

1 2