待办事项安排办公任务（HTML+CSS+JavaScript实现）源码下载
待办事项安排办公任务（HTML+CSS+JavaScript实现）源码下载[*]重新点击已勾选的复选框，事项回到未完成列表
[*]可以随时删除项目
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代办事项</title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav {
width: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.nav input {
width: 450px;
height: 50px;
font-size: 25px;
padding-left: 10px;
}
.nav button {
width: 150px;
height: 50px;
border: none;
color: white;
background-color: orange;
font-size: 18px;
}
.nav button:active {
background-color: grey;
}
.container {
width: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
padding-top: 10px;
}
.container .left,
.container .right {
width: 50%;
}
.container .left h3,
.container .right h3 {
text-align: center;
height: 50px;
line-height: 50px;
background-color: black;
color: white;
}
.container .row {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container .row span {
width: 240px;
}
.container .row button {
width: 40px;
height: 30px;
}
</style>
<!-- 表示上方的 div，里面方输入框和按钮 -->
<div class="nav">
<input type="text">
<button>新建任务</button>
</div>
<!-- 下方的 div，里面分成左右两栏 -->
<div class="container">
<div class="left">
<h3>未完成</h3>
</div>
<div class="right">
<h3>已完成</h3>
</div>
</div>
<script>
let addTaskBtn = document.querySelector('.nav button');
addTaskBtn.onclick = function() {
// 1. 获取输入到的内容
let input = document.querySelector('.nav input');
let taskContent = input.value;
// 2. 创建一个 div.row, 里面设置上面需要的 复选框, 文本， 删除按钮
let row = document.createElement('div');
row.className = 'row';
let checkBox = document.createElement('input');
checkBox.type = 'checkbox';
let span = document.createElement('span');
span.innerHTML = taskContent;
let deleteBtn = document.createElement('button');
deleteBtn.innerHTML = '删除';
row.appendChild(checkBox);
row.appendChild(span);
row.appendChild(deleteBtn);
// 3. 把 div.row 添加到 .left 中
let left = document.querySelector('.left');
left.appendChild(row);
// 4. 给 checkBox 增加一个点击处理函数，点击之后就能直接移动任务
checkBox.onclick = function() {
// 当用户点击的时候，就获取到当前的这个row元素
// 把这 row 给添加到另外一侧
if (checkBox.checked) {
// 已选中状态
target = document.querySelector('.right');
} else {
target = document.querySelector('.left');
}
target.appendChild(row);
}
// 5. 实现删除效果
deleteBtn.onclick = function() {
// 要想删除 row， 就需要知道 row 的父元素
let parent = row.parentNode;
parent.removeChild(row);
}
// 6. 删除输入框的内容
input.value = '';
}
</script>
</body>
</html>
页:
[1]