前端项目—待办事项（HTML+CSS+JavaScript实现）

输入待办内容新建任务完成事项后点击复选框，项目自动更新到已完成列表重新点击已勾选的复选框，事项回到未完成列表可以随时删除项目可直接运行项目源码（.html）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"

Zincy星辰

3286人浏览 · 2022-04-13 18:18:33

Zincy星辰 · 2022-04-13 18:18:33 发布

输入待办内容新建任务

完成事项后点击复选框，项目自动更新到已完成列表
重新点击已勾选的复选框，事项回到未完成列表
可以随时删除项目

可直接运行项目源码（.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>代办事项</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>

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

深入浅出dpdk_Pktgen-DPDK 网络性能测试

在未使用该工具之前，一直使用的是 iperf 在 10G 网卡场景下进行 64 字节小包性能测试。若要将 64 字节小包流量发到限速，要么一直增加 iperf 客户端，或者在一个高配 iperf 客户端虚拟机中不断的增加 iperf 进程。即使是这样，将发包达到网卡上限，却依然无法利用好 6wind 的性能。所以考虑使用 DPDK-pktgen 发包工具。该工具基于 DPDK 快速报文处里框架开发

华为开发者空间

python pyc文件解析_Python pyc格式解析

这篇文章只是纯粹分析python pyc文件格式，主要是关于pyc在文件中的存储方式进行了解析。pyc是python字节码在文件中存储的方式，而在虚拟机运行时环境中对应PyCodeObject对象。关于PyFrameObject以及PyFunctionObject等运行时结构，后续希望学习透彻了能够一并分析。1.示例文件源文件test.pys = "hello"def func():a = 3pr