1.构建清单html结构并绘制样式;
2.为任务清单增加"添加、删除"功能。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>任务清单</title>
<link href="./清单css.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<h1>我的任务清单</h1>
<div id="container">
<ul>
<li>学习jQuery L2</li>
<li>看动漫</li>
<li>写论文</li>
<span></span>
</ul>
<input id="intext" type="text" placeholder="+ 添加任务">
<br>
<input id="btn" type="button" value="确认添加">
</div>
<script>
$(function(){
function lineTrough(){
$("li").on("click",function(){
$(this).css({
"color":"rgb(179, 149, 179)",
"text-decoration":"line-through"
});
});
};
lineTrough();
//var $text=$("#intext");并没有获取到输入框的内容。
$("#btn").on("click",function(){
var $in_text=$("#intext").val();
$("span").before("<li>"+$in_text+"</li>");//添加新的内容。
lineTrough();
})
})
</script>
</body>
</html>
body{
background-color: rgb(203, 206, 209);
}
h1{
color: rgb(49, 140, 163);
margin-left: 600px;
}
div{
width: 300px;
margin: 10px auto;
}
ul{
list-style-type: circle;
list-style-position: inside;
outline: none;
}
li{
border: 1px solid #8d7a7a;
border-radius: 5px;
padding: 5px 10px;
margin-top: 10px;
}
#intext{
width: 256px;
height: 33px;
margin-left: 38px;
border: 1px solid #8d7a7a;
border-radius: 5px;
padding-left: 5px;
outline: none;
}
#btn{
background-color: rgb(71, 71, 138);
margin-left: 220px;
margin-top: 10px;
border-radius: 10px;
color: white;
outline: none;
padding: 5px 10px;
}
总结
任务清单的核心在于能够删除任务和添加任务。需要注意的是，要在已有任务项目之后设置一个空的项目，用于为添加函数提供锚点；且添加任务函数中最后需要调用删除任务函数，否则新添加的列表将无法实现删除功能。
网友评论