使用前端三剑客实现一个备忘录

2024-10-05 08:56:54

一，界面介绍

这个备忘录的界面效果如下：

可以实现任务的增删，并且在任务被勾选后会被放到已完成的下面。

示例：

（1），增加一个任务

（2），勾选任务

（3），删除任务

二，代码实现

1，使用html进行界面设计

我们先将这个界面分为两部分，分别是第一部分：

第二部分：

设计的框架代码如下：

    <div class="nov">
        <input type="text"><button>新建事项</button>
    </div>
    <div class="container">
        <div class="todo">
          <div class="row">
            <h3>已完成</h3>
            <span>吃饭</span>
            <button>删除</button>
          </div>
        </div>
        <div class="done">
            <h3>未完成</h3>
        </div>
    </div>

效果如下：

2，使用css进行样式设计

<style>
    //将所元素的内边距和外边距设置为0px，并且设置盒子大小为原大小
    *
    {

        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    //设置.nav类的大小和显示方式为flexbox,并且垂直居中，上边距为100px

    .nav
    {
        width: 800px;
        height: 100px;
        margin: 0px auto;
        padding: 0px;
        display: flex;
        align-items: center;
        margin-top: 100px;

    }

    //设置input的大小和边距，以及圆角

    .nav input
    {
        width: 600px;
        height: 60px;
        margin: 0px auto;
        border-radius: 0px;
    }
     
    //设置button的大小和圆角以及背景颜色和字体颜色
    .nav button
    {
         width: 200px;
         height: 60px;
         margin: 0px auto;
         border-radius: 0px;
         background-color: orange;
         color: white;
    }
     
    //设置按钮点击后的动作
    .nav button:active
    {
        color: blue;
        background-color: red;
    }
     
   //设置container类的样式
    .container
    {
        width: 800px;
        height: 60px;
        margin: 0px auto;
        display: flex;
        text-align: center;
    }

    h3{
        width: 400px;
        height: 60px;
        color: white;
        padding-top: 15px;
        background-color: black;

    }

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

    .row input
    {
        width: 20px;
        margin-right: 0px;

    }
    .row span
    {
        width: 200px;
        margin-left: 0px;
        padding-left: 0px;
        text-align: left;

    }

    .row button
    {
        width: 40px;
        height: 30px;
    }
      
    .row button:active
    {
        background-color: red;
        color: blueviolet;
    }


 </style>

效果：

3，使用js进行动态效果展示

使用js就是要实现添加和删除，以及在事件被勾选后放到已完成队列当中的功能。

1，添加事件到todo盒子中

function newObj()
         {
              //先得到输入框内的信息
              let input = document.querySelector('.nav input')
              console.dir(input)//为了调试
              let input_info = input.value
              //输入框没有内容就不执行下面的代码
              if(input_info=="") return

              //创建div盒子
              let div = document.createElement('div')
              //创建复选框
              let check_button = document.createElement('input')
              check_button.type='checkbox'
              console.log(check_button)
              //创建span
              let span = document.createElement('span')
              span.innerHTML = input_info;
              console.log(span.innerHTML)
              //创建删除按钮
              let button = document.createElement('button')
              button.innerHTML="删除"
              //整合到div中
              div.appendChild(check_button)
              div.appendChild(span)
              div.appendChild(button)
              //设置div的样式
              div.className="row"
              //将div放到todo下面
              let todo = document.querySelector('.todo')
              todo.appendChild(div)

         }

2，设置删除事件

              
              //先找到所有的删除按钮
              let buttons = document.querySelectorAll(".row button")
              console.log(buttons)
              //遍历按钮，让这些删除按钮绑定上删除事件
              for(i=0;i<buttons.length;i++)
              {
                buttons[i].onclick=function()
                {  
                    //找到row div
                    let parent = this.parentNode
                    //找到todo div
                    let grand = parent.parentNode
                    //在todo div中删除row
                    grand.removeChild(parent)
                }
              }

3，未完成事件被勾选后放到已完成事件下面

            //遍历复选框
             for(i = 0;i<check_buttons.length;i++)
             {
                   //绑定事件
                  check_buttons[i].onclick=function()
                  {
                      let row = this.parentNode
                      //插入者
                      let target
                      //判断插入者
                      if(this.checked)
                      {
                        target = document.querySelector('.done')
                      }
                      else
                      {
                        target=document.querySelector('.todo')
                      }
                      //插入
                      target.appendChild(row)
                    
                  }
             }

三，所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 <style>
    *
    {

        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    .nav
    {
        width: 800px;
        height: 100px;
        margin: 0px auto;
        padding: 0px;
        display: flex;
        align-items: center;
        margin-top: 100px;

    }

    .nav input
    {
        width: 600px;
        height: 60px;
        margin: 0px auto;
        border-radius: 0px;
    }

    .nav button
    {
         width: 200px;
         height: 60px;
         margin: 0px auto;
         border-radius: 0px;
         background-color: orange;
         color: white;
    }

    .nav button:active
    {
        color: blue;
        background-color: red;
    }

    .container
    {
        width: 800px;
        height: 60px;
        margin: 0px auto;
        display: flex;
        text-align: center;
    }

    h3{
        width: 400px;
        height: 60px;
        color: white;
        padding-top: 15px;
        background-color: black;

    }

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

    .row input
    {
        width: 20px;
        margin-right: 0px;

    }
    .row span
    {
        width: 200px;
        margin-left: 0px;
        padding-left: 0px;
        text-align: left;

    }

    .row button
    {
        width: 40px;
        height: 30px;
    }
    
    .row button:active
    {
        background-color: red;
        color: blueviolet;
    }

     


 </style>

<body>
    <div class="nav">
        <input type="text"><button onclick="newObj()">新建事项</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
          <div class="row">
              <input type="checkbox">
              <span>吃饭</span>
            <button>删除</button>
          </div>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
    
</body>

<script>
        function newObj()
         {
              //先得到输入框内的信息
              let input = document.querySelector('.nav input')
              console.dir(input)//为了调试
              let input_info = input.value
              input.value=""
              if(input_info=="") return

              //创建div盒子
              let div = document.createElement('div')
              //创建复选框
              let check_button = document.createElement('input')
              check_button.type='checkbox'
              console.log(check_button)
              //创建span
              let span = document.createElement('span')
              span.innerHTML = input_info;
              console.log(span.innerHTML)
              //创建删除按钮
              let button = document.createElement('button')
              button.innerHTML="删除"
              //整合到div中
              div.appendChild(check_button)
              div.appendChild(span)
              div.appendChild(button)
              //设置div的样式
              div.className="row"
              //将div放到todo下面
              let todo = document.querySelector('.todo')
              todo.appendChild(div)
              
              //先找到所有的删除按钮
              let buttons = document.querySelectorAll(".row button")
              console.log(buttons)
              //遍历按钮，让这些删除按钮绑定上删除事件
              for(i=0;i<buttons.length;i++)
              {
                buttons[i].onclick=function()
                {  
                    //找到row div
                    let parent = this.parentNode
                    //找到todo div
                    let grand = parent.parentNode
                    //在todo div中删除row
                    grand.removeChild(parent)
                }
              }

              //找到所有的复选框
              let check_buttons = document.querySelectorAll('.row input')
             
              //遍历复选框，看看是否被勾选
             for(i = 0;i<check_buttons.length;i++)
             {
                  check_buttons[i].onclick=function()
                  {
                      let row = this.parentNode
                      let target

                      if(this.checked)
                      {
                        target = document.querySelector('.done')
                      }
                      else
                      {
                        target=document.querySelector('.todo')
                      }

                      target.appendChild(row)
                    
                  }
             }

         }
</script>
</html>

码农公寓

一，界面介绍

二，代码实现

1，使用html进行界面设计

2，使用css进行样式设计

3，使用js进行动态效果展示

1，添加事件到todo盒子中

2，设置删除事件

3，未完成事件被勾选后放到已完成事件下面

三，所有代码

相关文章