前端程序——待办事项

项目样式

在这里插入图片描述

项目说明

上面的输入框可以输入待办事项
左面未完成任务栏中将复选框钩上后会自动进入已完成任务栏
后面的删除键点击后任务会自动删除，并给出提示
如果新建事物为空，会提示不能提交空的任务

代码实现

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>Documenttitle>
head>
<body>
    <div class="newWork">
        <input type="text">
        <button>新建事务button>
    div>

    <div class="container">
        <div class="todo">
            <h3>未完成h3>
            
        div>

        <div class="done">
            <h3>已完成h3>
            
        div>
    div>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .newWork {
            width: 800px;
            height: 100px;
            margin: 0 auto;

            display: flex;
            align-items: center;
        }

        .newWork input {
            height: 50px;
            width: 600px;
        }

        .newWork button {
            height: 50px;
            width: 180px;
            background-color: orange;
            color: black;
            border: none;
            margin-left: 20px;
            border-radius: 5px;
        }

        .newWork button:active{
            background-color: rgb(226, 86, 11);
        }

        .container {
            width: 800px;
            height: 800px;
            margin: 0 auto;
            display: flex;
        }

        .container h3 {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #333;
            color: antiquewhite;
        }

        .todo {
            width: 50%;
            display: 100%;
        }

        .done {
            width: 50%;
            height: 50%;
        }

        .row {
            height: 50px;
            display: flex;
            align-items: center;
        }

        .row input {
            margin: 0 10px;
        }

        .row span {
            width: 300px;
        }

        .row button {
            width: 50px;
            height: 40px;
        }
    style>

    <script>
        let addWorkButton = document.querySelector('.newWork button');
        addWorkButton.onclick = function(){
            let input = document.querySelector('.newWork input');
            let inputValue = input.value;
            if(inputValue == ''){
                alert('不能提交空的内容！');
                return;
            }
            input.value = '';
            let row = document.createElement('div');
            row.className = 'row';
            let checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            let span = document.createElement('span');
            span.innerHTML = inputValue;
            let button = document.createElement('button');
            button.innerHTML = '删除';
            row.appendChild(checkbox);
            row.appendChild(span);
            row.appendChild(button);
            let todo = document.querySelector('.todo');
            todo.appendChild(row);

            checkbox.onclick = function(){
                if(checkbox.checked) {
                    let work = document.querySelector('.done');
                    work.appendChild(row);
                } else {
                    let work = document.querySelector('.todo');
                    work.appendChild(row);
                }
            }

            button.onclick = function(){
                let parent = row.parentNode;
                parent.removeChild(row);
                alert('删除事物：' + inputValue + ' 成功！')
            }
        }

        
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

相关阅读:
Nginx Note（01）——Nginx简介、优点和用途
 Linux的介绍与应用
 redis基础2——key的基础使用、五大数据类型和三大特殊数据类型
 docker基础命令以及常用命令
 java毕业设计城市垃圾分类管理系统mybatis+源码+调试部署+系统+数据库+lw
Mysql加锁流程详解
 杭电oj 2049 不容易系列之(4)——考新郎 C语言
 数据库（mysql）之用户管理
 splay树:hdu1890
无代码开发批量修改入门教程
原文地址：https://blog.csdn.net/m0_60867520/article/details/127712197