原生JS实现todolist简版（不保存本地）

最新推荐文章于 2024-09-18 23:52:53 发布

原创最新推荐文章于 2024-09-18 23:52:53 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript实现todolist

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了一个基于HTML、CSS和JavaScript的ToDoList应用的实现过程，包括界面设计、样式设定及功能实现，如任务添加、删除及状态切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分：

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

<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>todolist</title>
  <link rel="stylesheet" href="./todolist.css">
</head>

<body>
  <div class="container">
    <nav class="ctn-nav">
      <div class="nav-title">
        <label class="navctn-tit">ToDoList</label>
        <input type="text" class="navcrn-ipt" placeholder="添加todo">
        <input type="button" value="添加" id="addbtn">
      </div>
    </nav>
    <div class="ctn-middle">
      <h2 class="mid-h2">正在进行
        <span class="mid-span">0</span>
      </h2>
      <ol class="mid-ol">
      </ol>
      <h2 class="mid-h2">已经完成
        <span class="mid-span">0</span>
      </h2>
      <ul class="mid-ul">

      </ul>
    </div>
    <footer class="ctn-footer">
      Copyright © 2014 todolist.cn
    </footer>
  </div>
  <script src="todolist1.js"></script>
</body>

</html>

css部分

* {
  padding: 0;
  margin: 0;
}

/* 主容器部分 */
.container,
body {
  background-color: #CDCDCD;
}

/* 主容器部分结束 */
/* 导航栏部分 */
.ctn-nav {
  width: 100%;
  height: 50px;
  background-color: rgba(47, 47, 47, 0.98);
  padding: 0 30%;
}

.nav-title {
  width: 600px;
  height: 50px;
}

.navctn-tit {
  color: #ddd;
  width: 100px;
  font-size: 24px;
  line-height: 50px;
}

.navcrn-ipt {
  width: 300px;
  height: 25px;
  margin-left: 100px;
  border-radius: 5px;
  text-indent: 10px;
  border: none;
}

/* 导航栏部分结束 */
/* 中间部分 */
.ctn-middle {
  width: 600px;
  padding: 0 10px;
  margin: 0 auto;
}

.mid-h2 {
  margin-top: 20px;
}

.mid-span {
  float: right;
  border-radius: 100%;
  color: #666;
  background-color: #E6E6FA;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
}

ol,
ul {
  margin-top: 5px;
  padding: 0 5px;
  list-style: none;

}



button {
  width: 20px;
  height: 20px;
  border-radius: 100%;

}

li {
  margin-top: 10px;
  background-color: white;
  border-radius: 5px;
}

.delbtn {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  float: right;
  background-color: red;
}

.checkdom {
  width: 20px;
  height: 20px;
  margin: 0 10px;
  margin-top: 5px;
}

/* 中间部分结束 */
/* 底部部分 */
.ctn-footer {
  font-size: 16px;
  text-align: center;
  color: #666;
}

/* 底部部分结束 */

JS部分：

;
(function () {
  var listDom = document.querySelector('.navcrn-ipt'); //文本输入对象
  var listOl = document.querySelector('.mid-ol'); //正在进行的li列表
  var listUl = document.querySelector('.mid-ul'); //已经完成的li列表

  var btnDom = document.getElementById('addbtn'); //添加按钮
  var midCtn = document.querySelector('.ctn-middle');//找到中间部分的容器



  function addList() {

    var iptCheDom = document.createElement("input"); //添加表单元素
    iptCheDom.setAttribute('type', 'checkbox'); //设置文本类型
    iptCheDom.classList.add('checkdom');//添加类名

    var btn = document.createElement("BUTTON"); //添加删除按钮
    btn.innerHTML = 'DEL';//给删除按钮命名DEL
    btn.classList.add("delbtn"); //添加类名
    var node = document.createElement("LI"); //添加li元素
    var value = document.createTextNode(listDom.value); //文本框的输出值

    node.appendChild(iptCheDom)//li元素中添加checkbox勾选元素
    node.appendChild(value);//li元素中添加输入的value值
    node.appendChild(btn);//li元素中添加删除按钮
    listDom.value = '';//清空input输入框的内容
    listOl.appendChild(node);//ol后面添加子节点li元素

    //  删除操作
    function handleDelTodo() {//设置一个handleDelTodo方法
      var ol = e.target.parentNode.parentNode;//设置当前位置的父元素的父元素---》就是ol
      var currLi = e.target.parentNode;//设置当前元素的父元素---》就是li
      ol.removeChild(currLi);//ol移除子节点li
    }
    btn.addEventListener('click', handleDelTodo);//事件方法绑定
  }
  btnDom.onclick = function () {//设置添加按钮的点击事件
    addList()
  }


  /**
   * 设置事件委托---》委托对象为中间的容器
   * 
   */
  midCtn.addEventListener('click', function (e) {
    if (e.target.nodeName.toLowerCase() === 'input') {//e.target.nodeName判断当前元素是否是‘input’
      var li = e.target.parentNode;//找到li的位置为当前元素的父元素
      var cnode = li.cloneNode(true);//克隆整个li元素

      if (li.parentNode.className === 'mid-ol' && e.target.checked) {//判断li的父元素的类名是否为'mid-ol'并且判断checkbox是否被勾选了
        listUl.appendChild(cnode);
        listOl.removeChild(li)
      } else {
        listOl.appendChild(cnode);
        listUl.removeChild(li)
      }
    }
    if (e.target.nodeName.toLowerCase() === 'button') {//e.target.nodeName判断当前元素是否是‘button’
      var ol = e.target.parentNode.parentNode;
      var currLi = e.target.parentNode;
      ol.removeChild(currLi);
    }
  })
})();