使用JavaScript制作待办事项列表

陈老说

已于 2022-03-21 07:59:27 修改

阅读量565

点赞数 2

文章标签： JavaScript 实现todolist JS案例山月剧明哥 HTML

于 2022-03-20 11:43:39 首次发布

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123610128

版权

这是一个使用HTML、CSS和JavaScript实现的待办事项清单应用程序。用户可以输入任务，点击添加按钮将任务添加到清单中，每个任务都可以删除。页面具有响应式设计，简洁的用户界面，并集成了百度统计代码。

摘要由CSDN通过智能技术生成

效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bGx5pyI5Ymn,size_20,color_FFFFFF,t_70,g_se,x_16

项目源码如下：

<!DOCTYPE html>
<html>
<head>
    <title>待办事项清单</title>
    <style media="screen">
        *,
        *:before,
        *:after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            background: #066acd;
        }

        .container {
            width: 40%;
            min-width: 450px;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            background: white;
            border-radius: 10px;

        }

        #newtask {
            position: relative;
            padding: 30px 20px;
        }

        #newtask input {
            width: 75%;
            height: 45px;
            font-family: 'Poppins', sans-serif;
            font-size: 15px;
            border: 2px solid #d1d3d4;
            padding: 12px;
            color: #111111;
            font-weight: 500;
            position: relative;
            border-radius: 5px;
        }

        #newtask input:focus {
            outline: none;
            border-color: #0d75ec;
        }

        #newtask button {
            position: relative;
            float: right;
            width: 20%;
            height: 45px;
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            font-size: 16px;
            background-color: #0d75ec;
            border: none;
            color: #ffffff;
            cursor: pointer;
            outline: none;
        }

        #tasks {
            background-color: #ffffff;
            padding: 30px 20px;
            margin-top: 10px;
            border-radius: 10px;
            width: 100%;
            position: relative;
        }

        .task {
            background-color: #c5e1e6;
            height: 50px;
            margin-bottom: 8px;
            padding: 5px 10px;
            display: flex;
            border-radius: 5px;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #939697;
            cursor: pointer;
        }

        .task span {
            font-family: 'Poppins', sans-serif;
            font-size: 15px;
            font-weight: 400;
        }

        .task button {
            background-color: #0a2ea4;
            color: #ffffff;
            height: 100%;
            width: 40px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            outline: none;
        }

        .completed {
            text-decoration: line-through;
        }
    </style>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?a9430a37066911650e26adadcc42798a";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div class="container">
    <div id="newtask">
        <input type="text" placeholder="要完成的任务..">
        <button id="push">添加</button>
    </div>

    <div id="tasks"></div>
</div>
<!--Script-->
<script type="text/javascript">
    document.querySelector('#push').onclick = function () {
        if (document.querySelector('#newtask input').value.length == 0) {
            alert("请输入任务")
        } else {
            document.querySelector('#tasks').innerHTML += `
            <div class="task">
                <span id="taskname">
                    ${document.querySelector('#newtask input').value}
                </span>
                <button class="delete">
                    <i class="far fa-trash-alt"></i>
                </button>
            </div>
        `;

            var current_tasks = document.querySelectorAll(".delete");
            for (var i = 0; i < current_tasks.length; i++) {
                current_tasks[i].onclick = function () {
                    this.parentNode.remove();
                }
            }
        }
    }
</script>
</body>
</html>