一款简单实用的待办事项列表功能代码,可点击加号输入新的待办事项回车即可增加,鼠标滑动到每一个待办事项时出现删除按钮,可以点击删除当前待办事项,已经完成的待办事项,可以点击增加删除线并自动变灰,实际的细节功能请查看演示。
开头引入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("");
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791