效果图：
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>
转载请注明原文地址: https://www.6miu.com/read-39052.html
