待办事项-JavaScript实现

躲不过️动

已于 2022-01-22 12:04:52 修改

阅读量2k

点赞数 1

文章标签： javascript css

于 2022-01-22 12:03:48 首次发布

本文链接：https://blog.csdn.net/m0_52083255/article/details/122590454

版权

待办事项-JavaScript 实现

预期效果：

在这里插入图片描述

步骤：

创建页面布局--> HTML
更改页面样式--> CSS
内容实现--> JavaScript

HTML部分代码：

<!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>Document</title>
    <link rel="stylesheet" href="待办事项.css">
</head>
<body>
    <div id="addDiv">
        <input type="text">
        <button>新建任务</button>
    </div>
    <!-- 任务列表：分两列显示 -->
    <div id="container">
        <!-- 第一列：待办事项 -->
        <div id="todo">
            <h2>待办事项</h2>
            <!-- 先设置一些内容，之后js要组装为同样结构，并且提前查看css样式 -->
            <!-- 一个任务一行显示 -->
            <div class="row">
                <input type="checkbox">
                <span>内容</span>
                <button>删除</button>
            </div>
        </div>
        <!-- 第二列：已完成 -->
        <div id="done">
            <h2>已完成</h2>
        </div>
    </div>
</body>
<script src="待办事项.js"></script>
</html>

CSS部分代码：

* {
    /* 设置所有内边距 */
    padding: 0;
    /* 设置所有外边距 */
    margin: 0;
   /* 并排放置两个带边框的框 */
    box-sizing: border-box;
}

#addDiv {
    width: 600px;
    height: 40px;
    /* 弹性布局 */
    display: flex;
    /* 上下间距20px ,水平居中 */
    margin: 20px auto;
    /* 前后不间隔，中间间隔 */
    justify-content: space-between;
}
#addDiv>input {
    width: 79%;
}
#addDiv>button {
    width: 20%;
    background-color: orange;
    color: white;
    border: none;
}
#addDiv>button:active {
    /* 设置伪类标志 */
    background-color: gray;
}

#container {
    display: flex;
    /* 两个子元素一起居中 */
    justify-content: center;
}
#todo {
    width: 300px;
}
#done {
    width: 300px;
}
#todo>h2,
#done>h2 {
    height: 40px;
    background-color: black;
    color: white;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
}
.row {
    height:40px;
    display:flex;
    /* 对齐方式 */
    align-items: center;
}
.row>input {
    margin: 10px;
}
.row>span {
    width: 60%;
}
.row>button {
    width: 45;
    height:30px;
}

JavaScript部分代码：

// 新建按钮绑定点击事件
var add = document.querySelector("#addDiv>button");
var addText = document.querySelector("#addDiv>input");
var todo = document.querySelector("#todo");
var done = document.querySelector("#done");
add.onclick = function(){
    // 获取文本框元素可以写在点击事件外，但取值必须在点击事件内
    var addContent = addText.value;
    // 首尾去除空格，如果没有输入内容，不做任何操作
    if(addContent.trim().length == 0) return;
    // 否则，新建任务
    console.log(addContent);
    // 构造一个<div class='row'>
    var row = document.createElement("div");
    row.className = "row";

    // checkbox
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    row.appendChild(checkbox);

    // span
    var span = document.createElement("span");
    span.innerHTML = addContent;
    row.appendChild(span);

    // button
    var button = document.createElement("button");
    button.innerHTML = "删除";
    row.appendChild(button);

    //将构造的div添加到待办div
    todo.appendChild(row);

    // 复选框，绑定点击事件/改变事件，如果选中在已完成，未选中在待办
    checkbox.onchange = function(){
        var target = checkbox.checked ? done : todo;
        target.appendChild(row);
    }

    button.onclick = function(){
        // 按钮点击事件，绑定的元素，应该是同一行的div
        // 不能直接使用row，因为row元素是新建任务时创建的，需要动态取button上一级
        //div row
        var parent = this.parentNode;
        //父级节点删除子节点
        //todo或done
        var grand = parent.parentNode;
        grand.removeChild(parent);
    }
}