• Jquery-todolist案例

    先来看布局：

     当在上面的框里面输入事件按下回车之后会变成下面这样：

    然后勾选吃饭前面的复选框后：

     最后点击最后的按钮阔以删除：

     

    案例分析：
    1.刷新页面不会丢失数据，因此需要用到本地存储localStorage。

    2.核心思路是不管按下回车还是点击复选框都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据。

    3. 存储的数据格式：var todolist=[{title:'xxx',done:false}]

    4.注意点1：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)。

    5.注意点2：获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()，我们才能使用里面的数据。

    功能一：按下回车把数据添加到本地存储内

    1.页面中的数据都要从本地存储里面获取，这样刷新页面就不会丢失数据，所以要先把数据保存到本地存储里面。

    2.利用事件对象keyCode判断用户按下回车键（13）.

    3.声明一个数据，保存数据。

    4.先要读取本地存储原来的数据（声明函数getData()），放到这个数组里面。

    5.之后把最新从表单获取过来的数据追加到数组里面。

    6.最后把数组存储给本地存储（声明函数savaData()）。

    代码：
     

    1. $(function() {
    2.     // 1.按下回车，把完整数据存储到本地存储里面
    3.     // 存储数据格式 var todoist=[{title:"",done:false}]
    4.     $('#title').on('keydown', function(e) {
    5.             // 说明按下了回车
    6.             if (e.keyCode === 13) {
    7.                 // 先读取本地存储原来的数据
    8.                 var local = getdata();
    9.                 // 把local数组进行更新
    10.                 local.push({ title: $(this).val(), done: false });
    11.                 console.log(local);
    12.                 // 把local这个新数组存储给我们本地存储
    13.                 savedata(local);
    14.             }
    15.         })
    16.         // 读取本地存储数据的函数
    17.     function getdata() {
    18.         var data = localStorage.getItem('todolist');
    19.         // 说明有数据
    20.         if (data != null) {
    21.             // 要注意本地存储的数据是字符串格式的，我们需要的是对象格式的，所以需要用JSON.parse()进行钻换
    22.             return JSON.parse(data);
    23.         }
    24.         // 如果没有数据就返回一个空数组就可以了
    25.         else {
    26.             return [];
    27.         }
    28.     }
    29.     // 保存本地存储数据函数
    30.     function savedata(local) {
    31.         // 本地存储只能存取字符串格式的数据，所以需要把local转化为字符串格式
    32.         localStorage.setItem('todolist', JSON.stringify(local))
    33.  
    34.     }
    35. })

    功能二：本地存储数据渲染加载到页面

    1.因为后面也会经常渲染加载操作，所以声明一个函数load，方便调用。

    2.先要读取本地存储数据，数据不要忘记转化为对象格式。

    3.之后遍历这个数据采用$.each()，有几条数据就生成几个li添加到ol里面面。

    4.每次渲染之前先要把原先里面的ol内容清空，然后渲染加载最新的数据。

    1. $(function() {
    2.     // 每次打开页面就渲染一次
    3.     load();
    4.     // 1.按下回车，把完整数据存储到本地存储里面
    5.     // 存储数据格式 var todoist=[{title:"",done:false}]
    6.     $('#title').on('keydown', function(e) {
    7.             // 说明按下了回车
    8.             if (e.keyCode === 13) {
    9.                 // 先读取本地存储原来的数据
    10.                 var local = getdata();
    11.                 // 把local数组进行更新
    12.                 local.push({ title: $(this).val(), done: false });
    13.                 // 把local这个新数组存储给我们本地存储
    14.                 savedata(local);
    15.                 // 清空ol
    16.                 $('ol').empty();
    17.                 // 2.本地存储数据渲染到页面
    18.                 load();
    19.             }
    20.         })
    21.         // 读取本地存储数据的函数
    22.     function getdata() {
    23.         var data = localStorage.getItem('todolist');
    24.         // 说明有数据
    25.         if (data != null) {
    26.             // 要注意本地存储的数据是字符串格式的，我们需要的是对象格式的，所以需要用JSON.parse()进行钻换
    27.             return JSON.parse(data);
    28.         }
    29.         // 如果没有数据就返回一个空数组就可以了
    30.         else {
    31.             return [];
    32.         }
    33.     }
    34.     // 保存本地存储数据函数
    35.     function savedata(local) {
    36.         // 本地存储只能存取字符串格式的数据，所以需要把local转化为字符串格式
    37.         localStorage.setItem('todolist', JSON.stringify(local))
    38.  
    39.     }
    40.     // 本地存储数据渲染到页面
    41.     function load() {
    42.         // 选读取本地存储的数据
    43.         var data = getdata();
    44.  
    45.         // 遍历这个数据
    46.         $.each(data, function(index, ele) {
    47.             $('ol').prepend("
    48. " + ele.title + "
      49. ")
  • })
  • }
  • })

    • 功能三：删除操作

    1.点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。

    2.核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li。

    3.我们可以给链接自定义属性记录当前的索引号。

    4.根据这个索引号删除相关的数据，可以采用数组的splice(i,1)方法。

    5.存储修改后的数据，然后存储给本地存储。

    6.因为a是动态创建的，我们使用on方法绑定事件。

    1. $(function() {
    2.     // 每次打开页面就渲染一次
    3.     load();
    4.     // 1.按下回车，把完整数据存储到本地存储里面
    5.     // 存储数据格式 var todoist=[{title:"",done:false}]
    6.     $('#title').on('keydown', function(e) {
    7.             // 说明按下了回车
    8.             if (e.keyCode === 13) {
    9.                 // 先读取本地存储原来的数据
    10.                 var local = getdata();
    11.                 // 把local数组进行更新
    12.                 local.push({ title: $(this).val(), done: false });
    13.                 // 把local这个新数组存储给我们本地存储
    14.                 savedata(local);
    15.                 // 2.本地存储数据渲染到页面
    16.                 load();
    17.  
    18.             }
    19.         })
    20.         // 3.删除操作
    21.     $('ol').on('click', 'a', function() {
    22.             // (1)先获取本地存储
    23.             var data = getdata();
    24.             // （2）修改数据
    25.             // 获取被点击的a的索引号
    26.             var i = $(this).attr('id')
    27.                 // 删除第i条信息 data现在是一个数组
    28.             data.splice(i, 1)
    29.                 // （3）保存到本地存储
    30.             savedata(data)
    31.                 // （4）重新渲染页面
    32.             load();
    33.         })
    34.         // 读取本地存储数据的函数
    35.     function getdata() {
    36.         var data = localStorage.getItem('todolist');
    37.         // 说明有数据
    38.         if (data != null) {
    39.             // 要注意本地存储的数据是字符串格式的，我们需要的是对象格式的，所以需要用JSON.parse()进行钻换
    40.             return JSON.parse(data);
    41.         }
    42.         // 如果没有数据就返回一个空数组就可以了
    43.         else {
    44.             return [];
    45.         }
    46.     }
    47.     // 保存本地存储数据函数
    48.     function savedata(local) {
    49.         // 本地存储只能存取字符串格式的数据，所以需要把local转化为字符串格式
    50.         localStorage.setItem('todolist', JSON.stringify(local))
    51.  
    52.     }
    53.     // 本地存储数据渲染到页面
    54.     function load() {
    55.         // 选读取本地存储的数据
    56.         var data = getdata();
    57.         // 清空ol
    58.         $('ol').empty();
    59.         // 遍历这个数据
    60.         $.each(data, function(index, ele) {
    61.             $('ol').prepend("
    62. " + ele.title + "
      ">
      63. ")
  • })
  • }
  • })

    • 功能四：正在进行和已完成选项操作

    1.当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表

    2.点击之后，获取本地存储数据

    3.修改对应数据属性done为当前复选框的checked状态

    4.之后保存数据到本地存储

    5.重新渲染加载数据列表

    6.load加载函数里面，新增一个条件，如果当前数据的done为true就是已经完成，就把列表渲染到ul里面

    7.如果当前数据的done为false，则是待办事项，就把列表渲染加载到ol里面

    代码：
     

    1. $(function() {
    2.     // 每次打开页面就渲染一次
    3.     load();
    4.     // 1.按下回车，把完整数据存储到本地存储里面
    5.     // 存储数据格式 var todoist=[{title:"",done:false}]
    6.     $('#title').on('keydown', function(e) {
    7.             // 说明按下了回车
    8.             if (e.keyCode === 13) {
    9.                 // 先读取本地存储原来的数据
    10.                 var local = getdata();
    11.                 // 把local数组进行更新
    12.                 local.push({ title: $(this).val(), done: false });
    13.                 // 把local这个新数组存储给我们本地存储
    14.                 savedata(local);
    15.                 // 2.本地存储数据渲染到页面
    16.                 load();
    17.                 // 把表单里面的内容清空
    18.                 $(this).val('');
    19.  
    20.             }
    21.         })
    22.         // 3.删除操作
    23.     $('ol').on('click', 'a', function() {
    24.             // (1)先获取本地存储
    25.             var data = getdata();
    26.             // （2）修改数据
    27.             // 获取被点击的a的索引号
    28.             var i = $(this).attr('id')
    29.                 // 删除第i条信息 data现在是一个数组
    30.             data.splice(i, 1)
    31.                 // （3）保存到本地存储
    32.             savedata(data)
    33.                 // （4）重新渲染页面
    34.             load();
    35.         })
    36.         // 正在进行和已完成选项操作
    37.     $('ol,ul').on('click', 'input', function() {
    38.             // （1）先获取本地存储的数据
    39.             var data = getdata();
    40.             // （2）修改数据
    41.             // 先获取到索引号
    42.             var index = $(this).siblings('a').attr('id');
    43.             data[index].done = $(this).prop('checked');
    44.             console.log(data);
    45.             // （3）保存到本地存储
    46.             savedata(data)
    47.                 // （4）重新渲染页面
    48.             load();
    49.         })
    50.         // 读取本地存储数据的函数
    51.     function getdata() {
    52.         var data = localStorage.getItem('todolist');
    53.         // 说明有数据
    54.         if (data != null) {
    55.             // 要注意本地存储的数据是字符串格式的，我们需要的是对象格式的，所以需要用JSON.parse()进行钻换
    56.             return JSON.parse(data);
    57.         }
    58.         // 如果没有数据就返回一个空数组就可以了
    59.         else {
    60.             return [];
    61.         }
    62.     }
    63.     // 保存本地存储数据函数
    64.     function savedata(local) {
    65.         // 本地存储只能存取字符串格式的数据，所以需要把local转化为字符串格式
    66.         localStorage.setItem('todolist', JSON.stringify(local))
    67.  
    68.     }
    69.     // 本地存储数据渲染到页面
    70.     function load() {
    71.         // 选读取本地存储的数据
    72.         var data = getdata();
    73.         // 清空ol
    74.         $('ol').empty();
    75.         // 清空ul
    76.         $('ul').empty();
    77.  
    78.         // 遍历这个数据
    79.         $.each(data, function(index, ele) {
    80.             // 如果完成了放在ul里面
    81.             if (ele.done) {
    82.                 $('ul').prepend("
    83. " + ele.title + "
      ">
      84. ")
  • }
  • // 如果没有完成放在ol里面
  • else {
  • $('ol').prepend("

  • " + ele.title + "

    ">
    • ")
  • }
  • })
  • }
  • })

    • 功能五：统计正在进行个数和已经完成个数

    1.在load函数里面操作

    2.声明两个变量：todoCount待办个数，doneCount已完成个数

    3.当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++否则doneCount++

    4.最后修改相应元素的text()

    完整代码如下：
    html部分：
     

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    7.     <title>ToDoList—最简单的待办事项列表title>
    8.     <link rel="stylesheet" href="../css/index.css">
    9.     <script src="../瀑布流/js/jquery.min.js">script>
    10.     <script src="E:\JS基础素材\java-script-master\java-script-master\jquery代码素材\jquery代码素材\day3\code\13-todolist\js\todolist.js">script>
    11. head>
    12.  
    13. <body>
    14.     <header>
    15.         <section>
    16.             <label for="title">ToDoListlabel>
    17.             <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
    18.         section>
    19.     header>
    20.     <section>
    21.         <h2>正在进行 <span id="todocount">span>h2>
    22.         <ol id="todolist" class="demo-box">
    23.  
    24.         ol>
    25.         <h2>已经完成 <span id="donecount">span>h2>
    26.         <ul id="donelist">
    27.  
    28.         ul>
    29.     section>
    30.     <footer>
    31.         Copyright © 2014 todolist.cn
    32.     footer>
    33.  
    34.  
    35. body>
    36.  
    37. html>

    CSS部分：
     

    1. body {
    2.     margin: 0;
    3.     padding: 0;
    4.     font-size: 16px;
    5.     background: #CDCDCD;
    6. }
    7.  
    8. header {
    9.     height: 50px;
    10.     background: #333;
    11.     background: rgba(47, 47, 47, 0.98);
    12. }
    13.  
    14. section {
    15.     margin: 0 auto;
    16. }
    17.  
    18. label {
    19.     float: left;
    20.     width: 100px;
    21.     line-height: 50px;
    22.     color: #DDD;
    23.     font-size: 24px;
    24.     cursor: pointer;
    25.     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    26. }
    27.  
    28. header input {
    29.     float: right;
    30.     width: 60%;
    31.     height: 24px;
    32.     margin-top: 12px;
    33.     text-indent: 10px;
    34.     border-radius: 5px;
    35.     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    36.     border: none
    37. }
    38.  
    39. input:focus {
    40.     outline-width: 0
    41. }
    42.  
    43. h2 {
    44.     position: relative;
    45. }
    46.  
    47. span {
    48.     position: absolute;
    49.     top: 2px;
    50.     right: 5px;
    51.     display: inline-block;
    52.     padding: 0 5px;
    53.     height: 20px;
    54.     border-radius: 20px;
    55.     background: #E6E6FA;
    56.     line-height: 22px;
    57.     text-align: center;
    58.     color: #666;
    59.     font-size: 14px;
    60. }
    61.  
    62. ol,
    63. ul {
    64.     padding: 0;
    65.     list-style: none;
    66. }
    67.  
    68. li input {
    69.     position: absolute;
    70.     top: 2px;
    71.     left: 10px;
    72.     width: 22px;
    73.     height: 22px;
    74.     cursor: pointer;
    75. }
    76.  
    77. p {
    78.     margin: 0;
    79. }
    80.  
    81. li p input {
    82.     top: 3px;
    83.     left: 40px;
    84.     width: 70%;
    85.     height: 20px;
    86.     line-height: 14px;
    87.     text-indent: 5px;
    88.     font-size: 14px;
    89. }
    90.  
    91. li {
    92.     height: 32px;
    93.     line-height: 32px;
    94.     background: #fff;
    95.     position: relative;
    96.     margin-bottom: 10px;
    97.     padding: 0 45px;
    98.     border-radius: 3px;
    99.     border-left: 5px solid #629A9C;
    100.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    101. }
    102.  
    103. ol li {
    104.     cursor: move;
    105. }
    106.  
    107. ul li {
    108.     border-left: 5px solid #999;
    109.     opacity: 0.5;
    110. }
    111.  
    112. li a {
    113.     position: absolute;
    114.     top: 2px;
    115.     right: 5px;
    116.     display: inline-block;
    117.     width: 14px;
    118.     height: 12px;
    119.     border-radius: 14px;
    120.     border: 6px double #FFF;
    121.     background: #CCC;
    122.     line-height: 14px;
    123.     text-align: center;
    124.     color: #FFF;
    125.     font-weight: bold;
    126.     font-size: 14px;
    127.     cursor: pointer;
    128. }
    129.  
    130. footer {
    131.     color: #666;
    132.     font-size: 14px;
    133.     text-align: center;
    134. }
    135.  
    136. footer a {
    137.     color: #666;
    138.     text-decoration: none;
    139.     color: #999;
    140. }
    141.  
    142. @media screen and (max-device-width: 620px) {
    143.     section {
    144.         width: 96%;
    145.         padding: 0 2%;
    146.     }
    147. }
    148.  
    149. @media screen and (min-width: 620px) {
    150.     section {
    151.         width: 600px;
    152.         padding: 0 10px;
    153.     }
    154. }

    Jquery部分：
     

    1. $(function() {
    2.     // 每次打开页面就渲染一次
    3.     load();
    4.     // 1.按下回车，把完整数据存储到本地存储里面
    5.     // 存储数据格式 var todoist=[{title:"",done:false}]
    6.     $('#title').on('keydown', function(e) {
    7.             // 说明按下了回车
    8.             if (e.keyCode === 13) {
    9.                 if ($(this).val() === '') {
    10.                     alert('请输入您要的操作')
    11.                 } else {
    12.                     // 先读取本地存储原来的数据
    13.                     var local = getdata();
    14.                     // 把local数组进行更新
    15.                     local.push({ title: $(this).val(), done: false });
    16.                     // 把local这个新数组存储给我们本地存储
    17.                     savedata(local);
    18.                     // 2.本地存储数据渲染到页面
    19.                     load();
    20.                     // 把表单里面的内容清空
    21.                     $(this).val('');
    22.  
    23.                 }
    24.  
    25.             }
    26.         })
    27.         // 3.删除操作
    28.     $('ol,ul').on('click', 'a', function() {
    29.             // (1)先获取本地存储
    30.             var data = getdata();
    31.             // （2）修改数据
    32.             // 获取被点击的a的索引号
    33.             var i = $(this).attr('id')
    34.                 // 删除第i条信息 data现在是一个数组
    35.             data.splice(i, 1)
    36.                 // （3）保存到本地存储
    37.             savedata(data)
    38.                 // （4）重新渲染页面
    39.             load();
    40.         })
    41.         // 正在进行和已完成选项操作
    42.     $('ol,ul').on('click', 'input', function() {
    43.             // （1）先获取本地存储的数据
    44.             var data = getdata();
    45.             // （2）修改数据
    46.             // 先获取到索引号
    47.             var index = $(this).siblings('a').attr('id');
    48.             data[index].done = $(this).prop('checked');
    49.             console.log(data);
    50.             // （3）保存到本地存储
    51.             savedata(data)
    52.                 // （4）重新渲染页面
    53.             load();
    54.         })
    55.         // 读取本地存储数据的函数
    56.     function getdata() {
    57.         var data = localStorage.getItem('todolist');
    58.         // 说明有数据
    59.         if (data != null) {
    60.             // 要注意本地存储的数据是字符串格式的，我们需要的是对象格式的，所以需要用JSON.parse()进行钻换
    61.             return JSON.parse(data);
    62.         }
    63.         // 如果没有数据就返回一个空数组就可以了
    64.         else {
    65.             return [];
    66.         }
    67.     }
    68.     // 保存本地存储数据函数
    69.     function savedata(local) {
    70.         // 本地存储只能存取字符串格式的数据，所以需要把local转化为字符串格式
    71.         localStorage.setItem('todolist', JSON.stringify(local))
    72.  
    73.     }
    74.     // 本地存储数据渲染到页面
    75.     function load() {
    76.         // 选读取本地存储的数据
    77.         var data = getdata();
    78.         // 清空ol
    79.         $('ol').empty();
    80.         // 清空ul
    81.         $('ul').empty();
    82.         var todoCount = 0;
    83.         var doneCount = 0;
    84.         // 遍历这个数据
    85.         $.each(data, function(index, ele) {
    86.             // 如果完成了放在ul里面
    87.             if (ele.done) {
    88.                 $('ul').prepend("
    89. " + ele.title + "
      ">
      90. ")
    90.                 doneCount++;
    91.             }
    92.             // 如果没有完成放在ol里面
    93.             else {
    94.                 $('ol').prepend("
    95. " + ele.title + "
      ">
      96. ")
    96.                 todoCount++;
    97.             }
    98.         })
    99.         $('#todocount').text(todoCount);
    100.         $('#donecount').text(doneCount);
    101.  
    102.     }
    103. })

  • 相关阅读:
    PMO大会的主办方是PMO评论
    利用flex布局实现骰子的点的分布
    Leetcode 15
    【c语言】自定义类型-结构体
    pip 更换源
    springboot~自定义favicon加载问题
    高数中的高斯公式
    通过中断类型码求中断入口地址
    【设计模式】Java设计模式 - 组合模式
    rocketmq-spring : 实战与源码解析一网打尽
  • 原文地址：https://blog.csdn.net/qq_43781887/article/details/125890110