ToDoList --- jQuery版

最新推荐文章于 2025-05-11 12:05:51 发布

原创最新推荐文章于 2025-05-11 12:05:51 发布 · 735 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery版本todolist

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的待办事项清单应用，包括HTML结构、CSS样式和JavaScript交互逻辑，展示了如何添加任务、标记为已完成及删除任务。

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

ToDoList — jQuery版

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>jquery--todolist</title>
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="./base.css">
  <link rel="stylesheet" href="./todolist.css">
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="./todolist.js"></script>
</head>

<body>
  <div class="container">
    <nav class="nav">
      <div class="nav-ctn clearfix">
        <div class="navctn-tit">ToDoList</div>
        <div class="navctn-ipt">
          <input type="text" placeholder="请输入" class="ipt_word">
        </div>
        <button class="addbtn">添加</button>
      </div>
    </nav>
    <div class="middle">
      <div class="mid-ctn">
        <div class="todonow">
          <h1>正在进行</h1>
          <ul class="ul"></ul>
          <div class="countone"></div>
        </div>
        <div class="todofinish">
          <h1>已经完成</h1>
          <ol class="ol"></ol>
          <div class="counttwo"></div>
        </div>
      </div>
    </div>
    <footer class="foot-ctn">
      Copyright © 2014 todolist.cn clear
    </footer>
  </div>
</body>

</html>

css

/* 导航栏模块 */

.nav {
  width: 100%;
  background: black;
}

.nav-ctn {
  width: 800px;
  margin: 0 auto;
  min-width: 800px;
  height: 50px;
  box-sizing: border-box;
}

.nav-ctn>div {
  float: left;
}

.navctn-tit {
  font-size: 22px;
  color: aliceblue;
  line-height: 50px;
  margin-right: 150px;
}

.ipt_word {
  width: 350px;
  height: 24px;
  margin-top: 12px;
  padding-left: 20px;
  font-size: 16px;
  border-radius: 5px;
}

.addbtn {
  text-align: center;
  margin-top: 12px;
  margin-left: 50px;
  border-radius: 5px;
  border-block-end-style: none;
  border-block-start-style: none;
  height: 24px;
  background-color: skyblue;
  color: antiquewhite
}

/* 导航栏部分结束 */

/* 中间部分 */

.mid-ctn {
  width: 800px;
  margin: 0 auto;
}

.li {
  width: 600px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 24px;
  margin: 10px 20px;
}

.check {
  width: 25px;
  height: 25px;
  border-radius: 100%;
}

.delbtn {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  color: antiquewhite;
  background: #ff0000;
  font-size: 12px;
  padding: 0;
  float: right;
}

.todonow {
  position: relative;
}

.countone {
  position: absolute;
  top: 5px;
  right: 100px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #e0e0e0;
}

.todofinish {
  position: relative;
}

.counttwo {
  position: absolute;
  top: 5px;
  right: 100px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #e0e0e0;
}

.countone,
.counttwo {
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  color: blue
}

/* 中间部分结束 */

/* 底部部分 */

.foot-ctn {
  text-align: center;
  font-size: 14px;
  color: #666;
}

/* 底部部分结束 */

js


$(function () {
  var $iptDom = $('.ipt_word');
  var $ulDom = $('.ul');
  var $olDom = $('.ol');
  var $addBtn = $('.addbtn');

  var count = 1;
  var $countone = $('.countone');
  var $counttwo = $('.counttwo');


  // 判断当前有多少个列表存在
  function countWay() {
    var $lenul = $ulDom.children('li').length;
    $countone.text($lenul);
  }
  function countWayTow() {
    var $lenol = $olDom.find('.li').length;
    $counttwo.html($lenol);
  }

  // 添加操作
  $addBtn.on("click", function () {
    createNodes();

  })

  // 添加方法
  function createNodes() {

    var $iptVal = $iptDom.val();

    // var $li = $(`<li class="li"><input id="ipt-${count}" type="checkbox" class="check"> ${$iptVal} <button class="delbtn">DEL</button></li> `);
    var $li = $('<li class="li"><input id="ipt' + count + '"  type="checkbox" class="check"/>' + $iptVal + '<button class="delbtn">DEL</button></li>')
    $ulDom.append($li);
    $iptDom.val('');

    // 绑定删除事件
    $li.on('click', '.delbtn', delHanle);
    // 绑定转换事
    $li.on('click', '#ipt' + count, changeHandle);
    count++;
    countWay();

  }
  // 删除方法
  function delHanle() {
    $(this).parent().remove();
    countWay();
    countWayTow()
  }

  // 转换步骤
  function changeHandle(e) {
    var $li = $(this).parent('.li');
    var $cloneLi = $li.clone(true);
    if (e.target.checked) {
      $olDom.append($cloneLi);
      $(this).parent().remove();
    } else {
      $ulDom.append($cloneLi);
      $(this).parent().remove();
    }


    countWay();
    countWayTow()


  }

})

在这里插入图片描述