使用html-css-js实现to-do-list待办事项小项目（详细注释）_html+js+css如何实现右下角待办图标点击待办图标时弹出对应的页面再次点击时可收

作者：知新_RL | 2024-05-29 05:38:05

踩

html+js+css如何实现右下角待办图标点击待办图标时弹出对应的页面再次点击时可收

需求：

1.添加事项
2.点击多选框将事件移到已完成事件或未完成事件中
3.删除事项
4.计算待完成事项数目
5.计算已完成事项数目
6.展示/隐藏待办事项
7.点击清空事项清空全部事项

新建to-do-list文件夹，用webstorm打开

在文件夹中新建html、css以及js文档
进入文件夹，使用终端安装normalize.css 相当于样式的resets

npm install --save normalize.css
1

html布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>to do list</title>
    <link rel="icon" href="images/favicon.png">
    <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/fonts.css">
</head>

<body>
    <div id='app'>
        <h1>Daily To-Do list </h1>
        <div class="todo-warpper">
        <!--时间板块-->
            <h2>
                <span id="getDay"></span><br>
                <span id="getDate"></span>
            </h2>
        <!-- +待办事项板块 -->
            <div class="info-box">
                <input id="input-todo" type="text" placeholder="创建待办事项">
                <button id="btn-add">+</button>
            </div>
        <!--初始 没有待办事项显示界面-->
            <div>
                <p class="status-free">
                    <img src="./images/beer celebration.svg" alt="">
                    没有待办事项！
                </p>
            </div>
        <!--显示待办事项-->
            <div>
                <p class="status-busy"></p>
                <ul class="todo-list" id="todolist"></ul>
            </div>
        <!--显示已完成待办事项-->
            <div>
                <p class="status"></p>
                <ul class="todo-list archived" id="archived"></ul>
            </div>
        <!--对待办事项以及已完成待办事项 进行控制-->
            <div class="control-buttons">
                <span id="showComplete-btn">展示已完成事项</span>
                <span id="clear-btn">清空事项</span
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/640801