用js写小黑记事本

最新推荐文章于 2024-06-11 20:56:20 发布

不善言辞_z

最新推荐文章于 2024-06-11 20:56:20 发布

阅读量272

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/bushanyanci_z/article/details/130649444

版权

<!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>Document</title>
  <style>
    h2 {
      text-align: center;
      margin-top: 100px;
    }

    body {
      text-align: center;
    }

    input {
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 16px;
      padding-left: 10px;
      outline: none;
      border: 1px solid #000;
    }

    button {
      width: 32px;
      height: 32px;
      border-radius: 5px;
      box-shadow: none;
      border: none;
      font-size: 21px;
      cursor: pointer;
    }

    p {
      color: #aaa;
    }

    .items {
      list-style: none;
      padding: 0;
      width: 350px;
      margin: 20px auto;
    }

    .items .item {
      font-size: 16px;
      line-height: 32px;
      text-align: left;
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }

    button.sub {
      width: 25px;
      height: 25px;
      font-size: 12px;
      float: right;
      margin-top: 5px;
    }

    button.sub:hover {
      color: red;
    }
  </style>
</head>

<body>
  <!-- 模板 -->
  <div id="app">
    <h2>小黑记事本</h2>
    <!-- 输入非空的内容，点击+按钮后，如果内容不为空，则将新的记录添加到列表中，同时清空当前输入的内容 -->
    <input type="text" placeholder="请输入非空内容，点击加号记录" />
    <button class="add"> +</button>
    <!-- 显示用户待办事项的列表，双击当前列表项或者点击X按钮后，删除当前记录 -->
    <ul class='items'>
      <!-- <li class="item">
        吃饭
        <button class="sub">X</button>
      </li> -->

    </ul>
    <p>双击栏目删除对应数据</p>
  </div>
  <script>
    // 页面进来就要给+绑定点击事件
    (function () {
      $('.add').addEventListener('click', clickHandler);
      // 使用事件委托,将删除操作绑定给ul
      $('ul').addEventListener('click', delHandler);

    })();
    let todos = [];
    function clickHandler() {
      // console.log(this);
      //  获取input中的value
      let input = $('input[type=text]');
      let val = input.value.trim();
      // console.log(val);
      // 为空结束代码执行
      if (!val) return;
      // 将数据添加到任务列表中
      todos.push(val)
      // 清空input
      input.value = '';
      render();
    }
    // 渲染到页面中
    // function render() {
    //   // console.log(todos);
    //   // 追加之前先清空
    //   $('.items').innerHTML = '';
    //   todos.forEach((v, k) => {
    //     let li = document.createElement('li');
    //     li.className = 'item';
    //     li.innerHTML = v;
    //     // 将索引设置到li标签的自定义属性上
    //     li.dataset.key = k;
    //     let btn = document.createElement('button');
    //     btn.className = 'sub';
    //     btn.innerHTML = 'X';
    //     li.appendChild(btn);
    //     // console.log(li);
    //     $('.items').appendChild(li)
    //   })
    // }

    function render() {
      // console.log(todos);
      // 追加之前先清空
      $('.items').innerHTML = '';
      todos.forEach((v, k) => {
        let li = createEle('li', {
          className: 'item',
          innerHTML: v,
        });
        li.dataset.key = k;
        let btn = createEle('button', {
          innerHTML: 'X',
          className: 'sub'
        });
        // console.log(btn);
        // 将btn追加到li中
        li.appendChild(btn)
        $('.items').appendChild(li)
      })
    }
    //创建节点的函数
    function createEle(nodeName, obj) {
      let newEle = document.createElement(nodeName);
      // 创建完成要设置属性
      Object.assign(newEle, obj);
      // console.log(newEle);
      return newEle


    }

    // 将所有li的点击事件都委托给ul处理,判断事件源
    function delHandler(eve) {
      // console.log(eve.target);
      // console.log(eve.target.nodeName);
      // 判断点击的是否为button按钮
      if (eve.target.nodeName == 'BUTTON') {
        // 获取其父级节点
        let li = eve.target.parentNode;
        // console.log(li);
        li.remove();
        // console.log(todos);
        // 获取元素对应的缩索引
        let index = li.dataset.key;
        // console.log(index);
        // 根据索引删除数组一个元素
        todos.splice(index, 1)
      }


    }



    // 获取的方法
    function $(ele) {
      // 如果获取的结果只有一个元素 则返回该元素
      // 如果获取的结果是有多个元素组成的伪数组,则返回该伪数组
      let res = document.querySelectorAll(ele);
      // console.log(res);
      return res.length == 1 ? res[0] : res;

    }
      // console.log($('li'));

    // console.log($('.items'));
  </script>

</body>

</html>