jQuery实现todoList案例

首先引入需要的资源 引入jquery 和初始化CSS

  <script src="http://www.wsg3096.com/ass/jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="http://www.wsg3096.com/ass/initialize.css">

页面中的CSS：

    .nav{
      background: #f52f3e;
      width: 100%;
      height: 64px;
    }
    .row{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .tit{
      color: white;
      font-size: 24px;
      font-weight: 700;
      line-height: 64px;
    }

    #text{
      width: 560px;
      height: 40px;
      outline: none;
      border: none;
      padding-left: 24px;
      font-size: 16px;
      border-radius: 6px;
      box-shadow: inset 0 0 10px #999;
    }

    .submit{
      width: auto;
      padding: 0px 16px;
      height: 40px;
      outline: none;
      border: none;
      background: #1770de;
      font-size: 16px;
      border-radius: 8px;
      cursor: pointer;
      color: white;
    }

 .content{
   width: 960px;
   margin: 0 auto;
 }

.content h2{
  font-size: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  line-height: 3;
}

.content h2 span{
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: white;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
}

    #todocount{
      background: #ff3355;
    }
    #donecount{
      background: #1770de;
    }

    li{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: white;
      line-height: 2.4;
      font-size: 16px;
      border-left: 6px solid #ff3355;
      padding: 0px 24px;
      margin-bottom: 8px;
      border-radius: 6px;
      overflow: hidden;
      user-select:none
    }

    ul li{
      border-color: #1770de!important;
    }

    li a{
      display: block;
      width: 24px;
      width: 24px;
      height: 24px;
      background: url("http://www.wsg3096.com/ass/off.png") no-repeat center;
      background-size: 16px;
    }

    ul li{
      text-decoration: line-through;
      opacity: 0.4;
    }

    .juzhong{
      text-align: center;
    }

    .juzhong1 {
      font-size: 22px;
      width: 640px;
      height: auto;
      background: #1770de;
      border-radius: 21px;
      margin:28px auto 0px;
      line-height: 42px;
      color: white;
      text-align: center;
      padding: 20px 0px 0px;
      overflow: hidden;
    }

    li i{
      width: 80%;
      display: block;
    }

    input{
      outline: none;
      margin-right: 6px;
    }

    .spa{
      width: 86%;
    }

    h2 i{
      font-size: 14px;
      color: #808080;
    }

    .qwer{
      background: #ff3355;
      line-height: 2.6;
      margin-top: 10px;
    }

页面的结构：

  <div class="nav">
    <div class="juzhong">
        <div class="row">
          <span class="tit">日程计划</span>
          <lable>
            <input type="text" id="text" placeholder="添加想要做的事">
            <button class="submit">敲击回车添加事项</button>
          </lable>
        </div>
    </div>
  </div>
  <div class="juzhong1">
    <h3 id="now"></h3>
    <h4 id="prompt">距离2022一建考试(2022-11-19 09:00)</h4>
    <div class="qwer">
    <span id="showtime"></span>
    <span id="sec"></span>
    </div>
  </div>
  <section class="content">
    <h2><lable>正在进行 <i>双击修改标题</i> </lable> <span id="todocount">0</span></h2>
    <ol id="todolist">

    </ol>
    <h2><lable>已经完成 <i>双击修改标题</i> </lable> <span id="donecount">0</span></h2>
    <ul id="donelist">

    </ul>
  </section>

JS逻辑：

 onload()
    //1.按下回车 把完整数据存储到本地储存里
    // 存储的数据格式 var todolist = [{title:'xxx',done:false}]
    $('#text').on('keydown',function (e) {
        if (e.keyCode == 13){
           if ($(this).val() == ''){
             alert('没写目标你让我填什么？')
           }else {
             //先读取本地储存原来的数据
             let local = getData()

             // 把当前表单的val 加入到 local中 并且更新本地存储
             local.push({
               title:$(this).val(),
               done:false
             })
             //console.log(local)
             saveData(local)
             onload()
             $(this).val('')
           }
        }
    })

    // 点击a 删除事件
    $('ol,ul').on('click','a',function () {
        let index = $(this).attr('id')
        let shuzu = getData()
        shuzu.splice(index,1)
        //console.log($(this).attr('id'))
       saveData(shuzu)
       onload()
    })

    //点击复选框 切换 完成与未完成
    $('ol,ul').on('click','input.xuan',function () {
        let  index = $(this).parent().siblings('a').attr('id')
        let  bool = $(this).prop('checked')
        let  shuzu = getData()
        shuzu[index].done = bool
        saveData(shuzu)
        onload()
    })





    // 外部通用函数
    // 获取本地存储
    function getData() {
        let data1 = localStorage.getItem('todo')
        if (data1 !== null){
          return JSON.parse(data1)
        }else {
          return []
        }
    }

    // 更新本地存储
    function saveData(data) {
        localStorage.setItem('todo',JSON.stringify(data))
    }

    function onload() {
      // 读取当前数据
      let data3 = getData(),todoCount = 0,doneCount = 0;
      // 清空 ol ul 的内容 再遍历
      $('ol,ul').empty()
      $.each(data3,function (i,ele) {
            if (ele.done){
              $('ul').prepend('<li><i><input type="checkbox" checked="checked" class="xuan"><span> '+ele.title+' </span></i><a href="javascript:;" id='+i+'></a></li>')
              doneCount++
            }else{
              $('ol').prepend('<li><i><input type="checkbox" class="xuan"><span> '+ele.title+' </span></i><a href="javascript:;" id='+i+'></a></li>')
              todoCount++
            }
            $('#todocount').text(todoCount)
            $('#donecount').text(doneCount)
      })
      $('li').on('dblclick','span',function () {
        let str = $(this).text(),
          shuzu = getData(),
          index = $(this).parent().siblings('a').attr('id');
        $(this).html('<input type="text" class="spa">')
        $(this).children().val(str)
        //失去焦点的时候 单独把文本值传进去
        $(this).children().on('blur', function () {
          $(this).parent().html($(this).val())
          shuzu[index].title = $(this).val()
          saveData(shuzu)
        })

        $(this).children().on('keydown', function (e) {
          if (e.keyCode === 13) {
            $(this).blur()
          }
        })
      })
    }

中间时间逻辑详见：原生JS显示当前时间和倒计时_benlalagang的博客-CSDN博客原生的JS实现显示当前时间+特定时间倒计时 每秒自动刷新https://blog.csdn.net/benlalagang/article/details/125968279

 let riqi = new Date(),
      year = riqi.getFullYear(),
      month = riqi.getMonth() + 1, // 0-11 所以 +1 ,
      day = riqi.getDate(),
      week = riqi.getDay(), // 周日 0 周一-周六 1-6,
      hour = riqi.getHours(),
      min = riqi.getMinutes(),
      sec = riqi.getSeconds(),
      weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'],
      today = +new Date(),
      eighteen = +new Date('2022-11-19 09:00');



    // 获取当前时间
    function now() {
      let riqi = new Date(),
        year = riqi.getFullYear(),
        month = riqi.getMonth() + 1, // 0-11 所以 +1 ,
        day = riqi.getDate(),
        week = riqi.getDay(), // 周日 0 周一-周六 1-6,
        hour = riqi.getHours(),
        min = riqi.getMinutes(),
        sec = riqi.getSeconds(),
        weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
      return "现在是" + year + "年" + month + "月" + day + "日" + weeks[week] + hour + "时" + min + "分" + sec + "秒"
    }



    function downTime(time){
      let  mbTime = +new Date(time),
        bTime = +new Date(),
        sec = document.querySelector('#sec'),
        times = parseInt((mbTime - bTime) / 1000),
        d = parseInt(times /60/60/24),
        h = parseInt(times /60/60%24),
        m = parseInt(times /60%60),
        s = parseInt(times %60);

      d = d < 10 ? '0' + d : d
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s

      sec.innerHTML = '默念' + times + '下'
      return d+ '天' +h + "小时" + m + "分" + s + "秒"
    }


    let div = document.getElementById("showtime"),
      pro = document.querySelector('#prompt'),
      ttt = null,
      nowss = document.querySelector('#now');


    function qqq() {
      div.innerHTML = downTime("2022-11-19 09:00")
    }

    function nowTime(){
      nowss.innerHTML = now()
    }

    nowTime()
    setInterval(nowTime,1000)


    qqq()

    if ((eighteen - today) > 0){
       ttt = setInterval(qqq,1000)
    }else {
      clearInterval(ttt)
      div.innerHTML = '数到头了，明年再战'
      let sec = document.querySelector('#sec')
      sec.innerHTML = '数到头了，明年再战'
      //location.reload(true)
    }

 项目预览地址：

toDoListhttp://www.wsg3096.com/plan.html