![在這裏插入圖片描述]()
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1681974_5do3a0itbp.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="container">
<input class="txtb" type="text" placeholder="Add a task" />
<div class="notcomp">
<h3>Not Completed</h3>
</div>
<div class="comp">
<h3>Completed</h3>
</div>
</div>
<script type="text/javascript">
$(".txtb").on("keyup",function(e){
if(e.keyCode==13 && $(".txtb").val() != ""){
var task=$("<div class='task'></div>").text($(".txtb").val());
var check=$("<i class='iconfont iconqueding'></i>").click(function(){
var p=$(this).parent();
p.fadeOut(function(){
$(".comp").append(p);
p.fadeIn();
});
$(this).remove()
});
var del=$("<i class='iconfont iconshanchu'></i>").click(function(){
var p=$(this).parent();
p.fadeOut(function(){
p.remove();
});
});
task.append(check);
task.append(del);
$(".notcomp").append(task);
$(".txtb").val("");
};
});
</script>
</body>
</html>
樣式代碼
*{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
box-sizing: border-box;
}
body{
background-image: linear-gradient(120deg,#487eb0,#fbc531);
min-height: 100vh;
}
.container{
max-width: 800px;
margin: auto;
padding: 10px;
}
.txtb{
width: 100%;
border: none;
border-bottom: 2px solid #000;
background: none;
padding: 10px;
outline: none;
font-size: 18px;
}
h3{
margin: 10px 0;
}
.task{
width: 100%;
background: rgba(255,255,255,.5);
padding: 18px;
margin: 6px 0;
}
.task i{
float: right;
margin-left: 20px;
cursor: pointer;
}
.comp .task{
background: rgba(0,0,0,.5);
color: #fff;
}
僅在學習過程中記錄所學內容，如有何處不足還請大佬們指出，歡迎同行一起交流。聯繫我微信chenhan-wu，記得備註csdn![在這裏插入圖片描述]()
