用原生js写的离线的TODOLIST

weixin_45776070

已于 2022-04-05 12:45:09 修改

阅读量350

点赞数 1

分类专栏：小项目文章标签： js css html

于 2021-05-10 20:38:33 首次发布

本文链接：https://blog.csdn.net/weixin_45776070/article/details/116609455

版权

小项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用原生js写的离线的TODOLIST

运行效果图

1.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="字体图标库文件/iconfont.css">
  <link rel="stylesheet" href="css/index.css" type="text/css">
  <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
  <div class="top">
    <div class="header">
      <div class="header_m">
        <input type="text" class="a" placeholder="添加TODO">
        <div class="tip">您还未输入！</div>
      </div>
    </div>
  </div>
  <div class="ctn_middle">
    <strong>正在进行</strong><div class="numb">0</div>
    <ul class="b"></ul>
    <strong>已经完成</strong><div class="numb">0</div>
    <ul class="c"></ul>
  </div>
</body>
</html>

2.CSS代码

body{
  background-color:rgb(182, 181, 181);
}
*{
  margin: 0px;
  padding: 0px;
}
ul,li{
  list-style: none;
}
/* 引入阿里巴巴图标库 */
a{
  font-family: 'iconfont';
  display:inline-block;
  margin-left: 10px;
  width: 20px;
  height: 30px;
  text-decoration: none;
  font-size: 18px;
  line-height: 30px;
  color: #000;
}
span{
  float: left;
  padding-left: 6px;
  margin-left: 10px;
  width: 250px;
  height: 30px;
  font-size: 13px;
  line-height: 30px;
}
input{
  padding-left: 6px;
  width: 250px;
  height: 24px;
  outline: none;
  font-size: 13px;
  border-width: 1px;
  border-radius: 8px;
}
.auu{
  margin-left: 10px;
  margin-top: 3px;
}
strong{
  margin-left: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
}
.chooses{
  float: left;
  margin-top: 5px;
  margin-left: 10px;
  height: 20px;
  width: 20px;
}
.top{
  height: 30px;
  background-color: rgb(63, 63, 63);
}
.header{
  margin: 0px auto;
  width: 260px;
  height: 30px;
  line-height: 30px;
}
.header_m{
  position: relative;
  width: 140%;
  height: 30px;
}
.tip{
  display:none;
  float: right;
  font-size: 15px;
  color: rgb(255, 0, 0);
}
.ctn_middle{
  position: relative;
  margin: 0px auto;
  width: 600px;
  height: 550px;
  background-color:rgb(182, 181, 181);
}
.numb{
  float: right;
  margin-right: 30px;
  margin-top: 13px;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
  line-height: 20px;
  background-color: rgb(231, 231, 231);
}
.lis{
  margin-left: 130px;
  height: 30px;
  width: 330px;
  margin-top: 3px;
  background-color: rgb(255, 255, 255);
}

3.js代码

window.addEventListener('load', function () {
  var div = document.querySelectorAll('.numb');
  var tip = document.querySelector('.tip');
  var a = document.querySelector('.a');
  var b = document.querySelector('.b');
  var c = document.querySelector('.c');
  var mid_ctn = document.querySelector('.ctn_middle');
  //计数函数
  function number(x, y) {
    for (var i = 0; i < x.children.length + 1; i++) {
      div[y].innerText = i;
    }
  }
  //离开焦点时，提示消失
  a.onblur = function () {
    tip.style.display = 'none';
  }
  //键盘按下事件函数
  document.addEventListener('keydown', function (e) {
    if (e.key == 'Enter') {
      //如果文本框里的值是空，则显示提示
      if (a.value == '') {
        tip.style.display = 'inline-block';
        return false;
      }
      else {
        //如果文本框里的值有，则提示消失
        tip.style.display = 'none';
        //创建一个li标签并且添加类
        var li = document.createElement('li');
        li.classList.add('lis');
        //li里创建一个input（即多选框）标签插入内容前面并且添加类
        var choose = document.createElement('input');
        choose.setAttribute('type', 'checkbox');
        choose.classList.add('chooses');
        li.appendChild(choose);
        //li里创建一个span标签插入内容前面并且添加类
        var al = document.createElement('span');
        al.innerText = a.value;
        li.appendChild(al);
        //li里创建a标签并添加垃圾桶图标
        var ar = document.createElement('a');
        ar.href = '#';
        ar.classList.add('iconfont');
        ar.classList.add('iconlajitong');
        li.appendChild(ar);
        //如果没有内容则li插在后面，如果有内容则li插在前面
        if (b.children.length == 0) { b.appendChild(li); }
        else { b.insertBefore(li, b.children[0]); }
        a.value = '';
        number(b, 0,);
      }
    }
  })
  //设置一个大的容器，用监听这个容器的点击事件，获取点击对象
  mid_ctn.addEventListener('click', function (e) {
    //如果是多选框
    if (e.target.nodeName.toLowerCase() === 'input' && e.target.className == 'chooses') {
      var copy_a = e.target.parentNode.cloneNode(true);
      //判断是否已勾选，若未勾复制并转移到已做
      if (e.target.parentNode.parentNode.className === 'b' && e.target.checked) {
        copy_a.style.backgroundColor = ' rgb(210, 210, 210)';
        if (c.children.length == 0) { c.appendChild(copy_a); }
        else { c.insertBefore(copy_a, c.children[0]); }
        e.target.parentNode.parentNode.removeChild(e.target.parentNode);
        number(b, 0,);
        number(c, 1,);
      }
      //否则复制并转移到未做
      else {
        copy_a.style.backgroundColor = ' rgb(255,255,255)';
        b.appendChild(copy_a);
        e.target.parentNode.parentNode.removeChild(e.target.parentNode);
        number(c, 1);
        number(b, 0);
      }
    }
    //如果是a标签，则删除
    else if (e.target.nodeName.toLowerCase() === 'a') {
      e.target.parentNode.parentNode.removeChild(e.target.parentNode);
      number(c, 1);
      number(b, 0);
    }
    //如果是span
    else if (e.target.nodeName.toLowerCase() === 'span') {
      //创建一个输入框，将span换成输入框，这样就可以修改里面的内容
      var au = document.createElement('input');
      au.setAttribute('type', 'text');
      au.classList.add('auu');
      au.value = e.target.innerText;
      e.target.parentNode.insertBefore(au, e.target.parentNode.children[1]);
      au.focus();
      e.target.style.display = 'none';
      au.onblur = function () {
        var an = document.createElement('span');
        an.innerText = au.value;
        au.parentNode.insertBefore(an, e.target.parentNode.children[1]);
        au.parentNode.removeChild(au);
        e.target.parentNode.removeChild(e.target);
      }
    }
    //如果点击其他地方则保持不变
    else {
      e.target = e.target;
    }
  })
})