视频已发。截图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 实现页面样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;
margin: 0 auto;
display:flex;
}
.todo,
.done {
width: 50%;
height: 100%;
}
.container h3 {
height: 50px;
text-align: center;
line-height: 50px;
background-color: #333;
color: #fff;
}
.nav {
width: 800px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
}
.nav input {
width: 600px;
height: 50px;
}
.nav button {
width: 200px;
height: 50px;
border: none;
background-color: rgb(78, 203, 78);
color: #fff;
}
.row {
height: 50px;
display: flex;
align-items: center;
}
.row input{
margin: 0 10px;
}
.row span {
width: 300px;
}
.row button {
width: 50px;
height: 40px;
}
</style>
</head>
<body>
<div class="nav">
<input type="text">
<button>新建按钮</button>
</div>
<div class="container">
<div class="todo">
<h3>未完成</h3>
</div>
<div class="done">
<h3>已完成</h3>
</div>
</div>
</body>
<script>
// 实现页面行为
//实现新增任务
var addTaskBtn = document.querySelector('.nav button');
addTaskBtn.onclick = function() {
//1、获取到任务内容的输入框
var input=document.querySelector('.nav input');
//2、获取到输入框的内容
var taskContent=input.value;
//3、根据内容新建一个元素节点
var row=document.createElement('div');
row.className='row';
var checkbox=document.createElement('input');
checkbox.type='checkbox';
var span = document.createElement('span');
span.innerHTML=taskContent;
var button = document.createElement('button');
button.innerHTML='删除';
row.appendChild(checkbox);
row.appendChild(span);
row.appendChild(button);
//4、把新节点插入到todo中
var todo = document.querySelector('.todo');
todo.appendChild(row);
//点击复选框后将元素放到“已完成”
//5、给checkbox注册点击事件
checkbox.onclick = function() {
var row=this.parentNode;
if(this.checked){
var target = document.querySelector('.done');
}else{
var target = document.querySelector('.todo');
}
target.appendChild(row);
}
//点击删除按钮删除该任务
//6、给删除按钮注册点击事件
button.onclick = function(){
var row=this.parentNode;
var grandParent=row.parentNode;
grandParent.removeChild(row);
}
}
</script>
</html>