• todoList清单(HTML+CSS+JavaScript)

       🌏个人博客主页：

    前言： 前段时间学习了JavaScript，然后写了一个todoList小项目，现在和大家分享一下我的清单以及如何实现的，希望对大家有所帮助

    🔥🔥🔥文章专题：todoList清单

    😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓 

     清单效果：

    页面展示： 

     tab-工作-tab-生活-tab-学习-tab-健康：

    功能介绍和代码详细解释：

    我一共写了4个页面，但是每个页面都是基本一样的，所以我通过第一个页面向大家展示我的功能都有哪些并且是如何实现的

    大体思路： 

    现在我来介绍一下我大体是如何实现的，首先我创造两个二维数组（一个arrList1数组储存我的未完成内容，一个arrList2数组储存我的已完成内容），还有一个全局变量   dataId，dataId在这里的作用非常大，dataId通过tab点击可以改变我的dataId的内容，然后显示我的第几个页面和改变我的二维数组的第一个下标的值（四个页面我都设置了相class=“note”属性，所以可以通过tab关联的dataId显示我的第几个note和转换我的第几个数组）

    提示：(第一个页面是我的arrList1[0]和arrList2[0])

    每一个页面的内容的存储都相当于两个一维数组

     1 全局dataId和二维数组显示：
    1.   // 判断到第几个note
    2.   let dataId = 1
    3.   //定义数组
    4.   if (!this.localStorage.getItem('arr')) {
    5.     localStorage.setItem('arr', "[[], [], [], []]")
    6.  
    7.   } else if (!this.localStorage.getItem('arr1')) {
    8.     localStorage.setItem('arr1', "[[], [], [], []]")
    9.   }
    10.   //我的未完成数组
    11.   const arrList1 = JSON.parse(localStorage.getItem('arr'))
    12.   //我的已完成数组
    13.   const arrList2 = JSON.parse(localStorage.getItem('arr1'))
    2 更新未完成和已完成：

    因为更新已完成和未完成相似 ，所以下面我就通过更新未完成来和大家讲解，关于更新添加，我是通过将我的本地存储解析成数组然后遍历将这些内容通过join返回成一个字符串，添加到我的un_ul里面，最终显示在页面当中

    1. // 更新未完成
    2.   function renderUnfinished() {
    3.     let un_ul = document.querySelector(`.note:nth-child(${dataId}) .uul-unfinished`);
    4.     const listItems = JSON.parse(localStorage.getItem('arr'))[dataId - 1].map((taskText, index) => {
    5.       return `
    6.
  • ${index}">
  • ${taskText}
  • 定时
  • ${index}">
  • `
  • }).join('')
  • console.log(JSON.parse(localStorage.getItem('arr'))[dataId - 1])
  • un_ul.innerHTML = listItems
  • }
  • // 更新已完成
  • function renderFinished() {
  • let ul = document.querySelector(`.note:nth-child(${dataId}) .uul-finished`)
  • const listItems = JSON.parse(localStorage.getItem('arr1'))[dataId - 1].map((taskText, index) => {
  • return `
  • ${index}">
  • ${taskText}
  • 定时
  • ${index}">
  • `
  • }).join('')
  • ul.innerHTML = listItems
  • }
    • 3 input输入框回车输入内容：

     第一步获得我的input标签，然后我给我的input标签添加键盘事件监听，如果监听到点击键盘的回车Enter键，并且我的内容不为空，然后就添加给我的数组和我的本地存储，并且通过我的 renderUnfinished方法进行显示，最后将我的input标签内容变为空

    1.   // 如果按下了回车事件
    2.   let inputTask = document.querySelector('#task')
    3.   inputTask.addEventListener('keydown', function (e) {
    4.     if (e.key === 'Enter') {
    5.       let newTaskText = inputTask.value.trim()
    6.       if (newTaskText !== '') {
    7.         arrList1[dataId - 1].push(newTaskText)
    8.         localStorage.setItem('arr', JSON.stringify(arrList1))
    9.         //更新未完成事件界面
    10.         renderUnfinished()
    11.         //将input设为空
    12.         inputTask.value = ''
    13.       }
    14.     }
    15.   })
    4 点击删除未完成：

     首先给父级元素添加点击事件，通过dataID来获得是第几个li标签然后删除该位置的数组内容（dataID和一维数组是关联的）通过dataID可以当中数组下标得到内容，所以可以直接使用dataID进行数组操作，定位到第几个内容然后直接进行删除操作，然后改变本地存储，最后进行遍历显示

    1.     // 删除未完成
    2.     //un_ul是存储内容li的父级ul标签，这里使用冒泡来获得li
    3.     un_ul.addEventListener('click', function (e) {
    4.       //判断点击的是否是delete小图标
    5.       if (e.target.classList.contains('delete')) {
    6.         let dataID = parseInt(e.target.dataset.id)
    7.         arrList1[dataId - 1].splice(dataID, 1)
    8.         console.log(arrList1)
    9.         //往本地存储添加相同密匙的内容只会覆盖
    10.         localStorage.setItem('arr', JSON.stringify(arrList1))
    11.         renderUnfinished()
    12.  
    13.       }
    14.     })
    5 点击删除已完成：

    这里的操作和上面的删除未完成操作一样，只是获取的父级元素不一样

    1.     // 删除已完成
    2.     ul.addEventListener('click', function (e) {
    3.       if (e.target.classList.contains('delete')) {
    4.         let dataID = parseInt(e.target.dataset.id)
    5.         // console.log(dataID)
    6.         arrList2[dataId - 1].splice(dataID, 1)
    7.  
    8.         localStorage.setItem('arr1', JSON.stringify(arrList2))
    9.         renderFinished()
    10.       }
    11.     })
    6 删除全部未完成：

    这个就是点击全部已完成的按钮，然后将数组和本地存储清空，最后进行更新

    1.     //删除全部已完成
    2.     text1.addEventListener('click', function (e) {
    3.       if (e.target.tagName === 'SPAN') {
    4.         arrList2[dataId - 1] = []
    5.         localStorage.setItem('arr1', JSON.stringify(arrList2))
    6.         renderFinished()
    7.       }
    8.     })
    7 点击圆形图标未完成变成已完成：

    这个就是点击li标签的第一个小图标，然后使得该内容从未完成变成已完成，内部操作就是点击该图标，通过dataName为下标来获得该处的内容，然后将该内容添加到已完成的数组里面，最后将该内容在未完成里面删除，最后修改本地存储，然后进行更新

    1.     // 点击未完成按钮任务变成完成
    2.     un_ul.addEventListener('click', function (e) {
    3.       if (e.target.classList.contains('finished')) {
    4.         let dataName = parseInt(e.target.dataset.name);
    5.         arrList2[dataId - 1].push(arrList1[dataId - 1][dataName]);
    6.         arrList1[dataId - 1].splice(dataName, 1);
    7.         localStorage.setItem('arr1', JSON.stringify(arrList2));
    8.         localStorage.setItem('arr', JSON.stringify(arrList1));
    9.         renderFinished();
    10.         renderUnfinished();
    11.       }
    12.     })

    8 时间提醒：

    这个是我的select标签里面的option进行的change 才会触发事件监听，虽然还是冒泡，但是在if语句里面进行了判断，开始获得事件，然后添加了计时器将时间每秒减一次，当时间为0时重复上面的未完成功能到已完成的操作

    1.   // 时间提醒
    2.     un_ul.addEventListener('change', function (e) {
    3.       if (e.target && e.target.classList.contains('timeNum')) {
    4.         let timer = +e.target.value;
    5.         let time = setInterval(function () {
    6.           timer--;
    7.           let dataName = parseInt(e.target.dataset.name);
    8.           if (timer === 0) {
    9.             arrList2[dataId - 1].push(arrList1[dataId - 1][dataName]);
    10.             arrList1[dataId - 1].splice(dataName, 1);
    11.             localStorage.setItem('arr', JSON.stringify(arrList1));
    12.             localStorage.setItem('arr1', JSON.stringify(arrList2));
    13.             renderFinished();
    14.             renderUnfinished();
    15.             alert('滴滴，时间到');
    16.             clearInterval(time);
    17.           }
    18.         }, 1000)
    19.       }
    20.     })
    9 计时器：

    获得当前时间进行显示 ，然后通过计时器每秒更改一次时间

    1.  
    2.   // 显示当前时间
    3.   function showTime() {
    4.  
    5.     let date = new Date()
    6.  
    7.     // 年月日
    8.     let year = date.getFullYear()
    9.     let month = date.getMonth() + 1
    10.     let day = date.getDate()
    11.  
    12.     // 时分秒
    13.     let hour = date.getHours()
    14.     hour = hour < 10 ? '0' + hour : hour
    15.     let minute = date.getMinutes()
    16.     minute = minute < 10 ? '0' + minute : minute
    17.     let second = date.getSeconds()
    18.     second = second < 10 ? '0' + second : second
    19.  
    20.     // 显示
    21.     let element = document.getElementById('date')
    22.     element.innerHTML = '
      ' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + '
      '
    23.   }
    24.  
    25.   let ShowTime = window.setInterval(showTime, 1000)

     全部代码展示：

    HTML:
    1. <body>
    2.   <p id="date">p>
    3.   
    4.   <div class="entire">
    5.     <div class="title"><img class="pic" src="./image/title.png"><img class="pic1" src="./image/bianqian.png">
    6.     div>
    7.     
    8.     <div class="header">
    9.       
    10.       <input id="task" type="text" placeholder="添加请按回车键">
    11.  
    12.     div>
    13.  
    14.     
    15.     <div class="middle">
    16.       
    17.       <div class="tabs">
    18.         
    19.         <div class="work active" data-id="1">工作div>
    20.         <div class="life" data-id="2">生活div>
    21.         <div class="study" data-id="3">学习div>
    22.         <div class="health" data-id="4">健康div>
    23.       div>
    24.  
    25.       
    26.       <div class="content">
    27.  
    28.         
    29.         <div class="note active">
    30.           <div class="work-unfinished">
    31.             <div class="note-text">未完成div>
    32.             
    33.             <ul class="uul-unfinished">
    34.               
    35.               
    36.             ul>
    37.           div>
    38.           <div class="work-finished">
    39.             <div class="text">
    40.               <div class="note-text">已完成div>
    41.               <span class="deleteAll">删除全部span>
    42.               <img src="./image/unfinished.png">
    43.             div>
    44.             
    45.             <ul class="uul-finished">
    46.               
    47.               
    48.             ul>
    49.           div>
    50.         div>
    51.  
    52.         
    53.         <div class="note">
    54.           <div class="life-unfinished">
    55.             <div class="note-text">未完成div>
    56.             
    57.             <ul class="uul-unfinished">
    58.               
    59.             ul>
    60.           div>
    61.           <div class="life-finished">
    62.             <div class="text">
    63.               <div class="note-text">已完成div>
    64.               <span class="deleteAll">删除全部span>
    65.               <img src="./image/unfinished.png">
    66.             div>
    67.             
    68.             <ul class="uul-finished">
    69.               
    70.             ul>
    71.           div>
    72.         div>
    73.  
    74.         
    75.         <div class="note">
    76.           <div class="study-unfinished">
    77.             <div class="note-text">未完成div>
    78.             
    79.             <ul class="uul-unfinished">
    80.               
    81.             ul>
    82.           div>
    83.           <div class="study-finished">
    84.             <div class="text">
    85.               <div class="note-text">已完成div>
    86.               <span class="deleteAll">删除全部span>
    87.               <img src="./image/unfinished.png">
    88.             div>
    89.             
    90.             <ul class="uul-finished">
    91.               
    92.             ul>
    93.           div>
    94.         div>
    95.  
    96.         
    97.         <div class="note">
    98.           <div class="health-unfinished">
    99.             <div class="note-text">未完成div>
    100.             
    101.             <ul class="uul-unfinished">
    102.               
    103.             ul>
    104.           div>
    105.           <div class="health-finished">
    106.             <div class="text">
    107.               <div class="note-text">已完成div>
    108.               <span class="deleteAll">删除全部span>
    109.               <img src="./image/unfinished.png">
    110.             div>
    111.             
    112.             <ul class="uul-finished">
    113.               
    114.             ul>
    115.           div>
    116.         div>
    117.  
    118.       div>
    119.     div>
    120.  
    121.   div>
    122.  
    123.   div>
    124.   <script src="./todoList.js">script>
    125. body>

    CSS:
    1. * {
    2.   margin: 0;
    3.   margin: 0;
    4.   box-sizing: border-box;
    5. }
    6.  
    7. li {
    8.   list-style: none;
    9. }
    10.  
    11. a {
    12.   text-decoration: none;
    13. }
    14.  
    15. body {
    16.   background-color: #fffbfb;
    17.   background-image: url(./image/bigbgc.png);
    18.   height: 1300px;
    19.   background-repeat: no-repeat;
    20.   background-size: cover;
    21.   user-select: none;
    22. }
    23.  
    24. #date {
    25.   text-align: center;
    26.   height: 80px;
    27.   font-size: 50px;
    28.   color: #fff;
    29. }
    30.  
    31. .entire {
    32.   margin: auto;
    33.   width: 600px;
    34.   height: 1100px;
    35.   border-radius: 45px;
    36.   border: 1px solid rgb(228, 228, 255);
    37.   box-shadow: 5px 5px 15px rgb(201, 198, 198), -5px -5px 10px #fff;
    38.   background-color: #ffefef;
    39.   /* background-image: url(./image/bgc.png);
    40.   background-size: contain; */
    41. }
    42.  
    43. .task-icon {
    44.   cursor: pointer;
    45.   font-family: 'icomoon';
    46.   display: inline-block;
    47.   width: 40px;
    48.   height: 40px;
    49.   font-size: 40px;
    50.   text-align: center;
    51.   border-radius: 20px;
    52.   /* box-shadow: 5px 5px 5px rgb(255, 255, 255), 5px 5px 5px #fffdfd; */
    53.   color: #ffffff;
    54.   margin-right: 10px;
    55.   margin-bottom: 9px;
    56. }
    57.  
    58. .life-finished .task-icon,
    59. .life-unfinished .task-icon {
    60.   color: #ffd1d1;
    61. }
    62.  
    63. .health-finished .task-icon,
    64. .health-unfinished .task-icon {
    65.   color: #dde6ff;
    66. }
    67.  
    68. .title {
    69.   margin: auto;
    70.   width: 400px;
    71.   height: 100px;
    72.   border-radius: 40px;
    73.   text-align: center;
    74.   box-shadow: 5px 5px 15px rgb(201, 198, 198), -5px -5px 10px #fff;
    75.   margin-bottom: 20px;
    76. }
    77.  
    78. /* .title span {
    79.   color: #d27171;
    80.   font-size: 30px;
    81.   margin-top: 5px;
    82.   text-align: center;
    83.   vertical-align: middle;
    84. } */
    85.  
    86. .title .pic {
    87.   width: 80px;
    88.   height: 80px;
    89.   vertical-align: middle;
    90.   margin-top: 10px;
    91.   margin-right: 10px;
    92. }
    93.  
    94. .title .pic1 {
    95.   border-radius: 12px;
    96.   width: 160px;
    97.   vertical-align: middle;
    98.   margin-top: 10px;
    99.   margin-right: 10px;
    100. }
    101.  
    102. .header input {
    103.   margin-left: 105px;
    104.   padding-left: 15px;
    105.   width: 390px;
    106.   height: 55px;
    107.   border-radius: 25px;
    108.   border: none;
    109.   outline: none;
    110.   font-size: 22px;
    111.   color: #e09191;
    112.   background-color: #ffefef;
    113.   box-shadow: 5px 5px 15px rgb(219, 218, 218) inset, -5px -5px 10px #fff inset;
    114. }
    115.  
    116. input::placeholder {
    117.   color: #f2b1b1;
    118.   font-size: 21px;
    119. }
    120.  
    121. .tabs {
    122.   margin-top: 35px;
    123.   display: flex;
    124.   gap: 10px;
    125.   border-bottom: 2px solid #f0b2b2;
    126. }
    127.  
    128. .tabs div {
    129.   padding: 10px 20px;
    130.   background-color: #ffefef;
    131.   border: 2px solid #e7b3b3;
    132.   border-top-left-radius: 36px;
    133.   border-top-right-radius: 36px;
    134.   border-bottom: none;
    135.   cursor: pointer;
    136.   color: #e59898;
    137.   box-shadow: 5px 5px 15px rgb(250, 241, 241) inset, -5px -5px 10px #fff inset;
    138. }
    139.  
    140. .tabs .active {
    141.   background-color: #ffd5d5;
    142. }
    143.  
    144. .timing {
    145.   width: 140px;
    146.   text-align: center;
    147. }
    148.  
    149. #timing-list {
    150.   width: 60px;
    151.   color: rgb(206, 168, 168);
    152.   outline: none;
    153.   border-color: rgb(228, 128, 128);
    154.   border-radius: 10px;
    155.   margin-top: 13px;
    156.  
    157. }
    158.  
    159. .content {
    160.   padding-top: 15px;
    161. }
    162.  
    163. .note {
    164.   padding-top: 20px;
    165.   margin: auto;
    166.   width: 560px;
    167.   height: 790px;
    168.   border: 3px solid #f7dfdf;
    169.   border-radius: 40px;
    170.  
    171. }
    172.  
    173. .note:nth-child(1) {
    174.   background-color: #ffdddd;
    175. }
    176.  
    177. .note:nth-child(2) {
    178.   background-color: #fffefe;
    179. }
    180.  
    181. .note:nth-child(2) .center-item {
    182.   color: #da5d5d;
    183. }
    184.  
    185. .note:nth-child(3) {
    186.   background-color: #ffdddd;
    187. }
    188.  
    189. .note:nth-child(3) .center-item {
    190.   color: #ffffff;
    191. }
    192.  
    193. .note:nth-child(4) {
    194.   background-color: #f8f9ff;
    195. }
    196.  
    197. .note:nth-child(4) .center-item {
    198.   color: #7d9fb8;
    199. }
    200.  
    201.  
    202. /* 设置背景图片 */
    203. .work-unfinished,
    204. .work-finished {
    205.   background-image: url(./image/bgc.png);
    206. }
    207.  
    208. .life-finished,
    209. .life-unfinished {
    210.   background-image: url(./image/bgc1.png);
    211.   background-size: cover;
    212. }
    213.  
    214. .study-unfinished,
    215. .study-finished {
    216.   background-image: url(./image/bgc2.png);
    217. }
    218.  
    219. .health-unfinished,
    220. .health-finished {
    221.   background-image: url(./image/bgc3.png);
    222. }
    223.  
    224. /* 设置完成和未完成的框的大小和样式 */
    225. .work-unfinished,
    226. .work-finished,
    227. .life-unfinished,
    228. .life-finished,
    229. .study-unfinished,
    230. .study-finished,
    231. .health-unfinished,
    232. .health-finished {
    233.   padding-top: 10px;
    234.   margin: auto;
    235.   height: 360px;
    236.   width: 510px;
    237.   border-radius: 25px;
    238.   border: #eadddd solid 2px;
    239.   box-shadow: 5px 5px 5px rgb(223, 223, 223) inset, -5px -5px 10px #f2e8e8 inset;
    240. }
    241.  
    242. /* 设置完成和未完成之间的间隔为20px */
    243. .work-unfinished,
    244. .life-unfinished,
    245. .study-unfinished,
    246. .health-unfinished {
    247.   margin-bottom: 20px;
    248. }
    249.  
    250. /* 设置完成和未完成的字体样式 */
    251. .note-text {
    252.   margin: auto;
    253.   width: 140px;
    254.   height: 50px;
    255.   border-radius: 22px;
    256.   padding-top: 5px;
    257.   color: #d58585;
    258.   font-size: 26px;
    259.   text-align: center;
    260. }
    261.  
    262. /* 更换第三个标签主题字体颜色 */
    263. .study-unfinished .note-text,
    264. .study-finished .note-text {
    265.   color: #ffffff;
    266. }
    267.  
    268. /* 更换第一个标签主题颜色 */
    269. .work-finished .note-text,
    270. .work-unfinished .note-text {
    271.   box-shadow: 5px 5px 5px rgb(248, 157, 157) inset, -5px -5px 10px #f2e8e8 inset;
    272.   background-color: #ffdfdf;
    273.  
    274. }
    275.  
    276. .life-finished .note-text,
    277. .life-unfinished .note-text {
    278.   box-shadow: 5px 5px 5px rgb(248, 157, 157) inset, -5px -5px 10px #f2e8e8 inset;
    279.   background-color: #fff8f8;
    280. }
    281.  
    282. .study-unfinished .note-text,
    283. .study-finished .note-text {
    284.   box-shadow: 5px 5px 5px rgb(207, 161, 161) inset, -5px -5px 10px #f2e8e8 inset;
    285.   background-color: #ffc5c5;
    286. }
    287.  
    288. .health-finished .note-text,
    289. .health-unfinished .note-text {
    290.   box-shadow: 5px 5px 5px #e3f1ff inset, -5px -5px 10px #dbdbdb inset;
    291.   color: #d6e3ff;
    292.   background-color: #ffffff;
    293. }
    294.  
    295.  
    296. .work-finished .note-text,
    297. .life-finished .note-text,
    298. .study-finished .note-text,
    299. .health-finished .note-text {
    300.   margin-left: 185px;
    301. }
    302.  
    303. .uul-unfinished,
    304. .uul-finished {
    305.   margin-top: 5px;
    306.   display: block;
    307.   width: 510px;
    308.   height: 295px;
    309.   overflow-y: scroll;
    310.   overflow-x: hidden;
    311. }
    312.  
    313.  
    314. /* 隐藏滚动条  */
    315. .uul-unfinished::-webkit-scrollbar,
    316. .uul-finished::-webkit-scrollbar {
    317.   width: 0;
    318. }
    319.  
    320. .uul-unfinished li,
    321. .uul-finished li {
    322.   padding: 11px;
    323.   margin-top: 12px;
    324.   margin-left: -10px;
    325.   border-radius: 30px;
    326.   display: flex;
    327.   height: 60px;
    328.   width: 450px;
    329.   text-align: center;
    330.   font-size: 17px;
    331.   color: #c06666;
    332. }
    333.  
    334. .work-unfinished .uul-unfinished li,
    335. .work-finished .uul-finished li {
    336.   box-shadow: 5px 5px 15px rgb(255, 255, 255) inset, -5px -5px 10px #f2e8e8 inset;
    337.   background-color: #ffc3c3;
    338. }
    339.  
    340. .life-unfinished .uul-unfinished li,
    341. .life-finished .uul-finished li {
    342.   box-shadow: 5px 5px 5px rgb(255, 211, 211) inset, -5px -5px 10px #f2e8e8 inset;
    343.   background-color: #ffffff;
    344. }
    345.  
    346. .study-unfinished .uul-unfinished li,
    347. .study-finished .uul-finished li {
    348.   box-shadow: 5px 5px 15px rgb(255, 255, 255) inset, -5px -5px 10px #f2e8e8 inset;
    349.   background-color: #ffa3a3;
    350. }
    351.  
    352. .health-unfinished .uul-unfinished li,
    353. .health-finished .uul-finished li {
    354.   box-shadow: 5px 5px 15px rgb(255, 255, 255) inset, -5px -5px 10px #e6f8ff inset;
    355.   background-color: #ffffff;
    356. }
    357.  
    358.  
    359. .center-item {
    360.   width: 250px;
    361.   height: 20px;
    362.   overflow: hidden;
    363.   margin-top: 10px;
    364.   text-align: left;
    365.  
    366. }
    367.  
    368. .uul-finished .center-item {
    369.   text-decoration: line-through;
    370. }
    371.  
    372. /* .delete {
    373.   cursor: pointer;
    374.   color: #ffffff;
    375.   height: 36px;
    376.   width: 36px;
    377. } */
    378.  
    379. /* 设置变签内容不可看 */
    380. .note {
    381.   display: none;
    382. }
    383.  
    384. /* 设置变迁内容可看 */
    385. .content .active {
    386.   display: block;
    387. }
    388.  
    389. /* 设置完成文字图片在一排 */
    390. .text {
    391.   display: flex;
    392. }
    393.  
    394. /* 
    395. .deleteAll {
    396.   cursor: pointer;
    397.   background-image: url(./image/unfinished.png);
    398.   width: 50px;
    399.   height: 50px;
    400. } */
    401.  
    402. .text img {
    403.   width: 30px;
    404.   height: 30px;
    405.   border-radius: 15px;
    406.   margin-right: 10px;
    407.   margin-left: 10px;
    408.   margin-top: 4px;
    409. }
    410.  
    411.  
    412. .text span {
    413.   width: 100px;
    414.   height: 40px;
    415.   /* cursor: pointer;/ */
    416.   text-align: center;
    417.   vertical-align: middle;
    418.   color: #8d2222;
    419.   font-size: 20px;
    420.   padding: 4px;
    421.   border-radius: 15px;
    422.   border: 1px solid rgb(255, 217, 142);
    423. }
    JS: 
    1. window.addEventListener('load', function () {
    2.   // 判断到第几个note
    3.   let dataId = 1
    4.   //显示时间1
    5.   showTime()
    6.   //定义数组
    7.   if (!this.localStorage.getItem('arr')) {
    8.     localStorage.setItem('arr', "[[], [], [], []]")
    9.  
    10.   } else if (!this.localStorage.getItem('arr1')) {
    11.     localStorage.setItem('arr1', "[[], [], [], []]")
    12.   }
    13.   const arrList1 = JSON.parse(localStorage.getItem('arr'))
    14.   const arrList2 = JSON.parse(localStorage.getItem('arr1'))
    15.  
    16.  
    17.   // 初始化所有标签页的任务列表
    18.   for (let i = 1; i <= 4; i++) {
    19.     dataId = i
    20.     renderUnfinished()
    21.     renderFinished()
    22.   }
    23.   //将dataId重新赋值为1
    24.   dataId = 1
    25.  
    26.   // 如果按下了回车事件
    27.   let inputTask = document.querySelector('#task')
    28.   inputTask.addEventListener('keydown', function (e) {
    29.     if (e.key === 'Enter') {
    30.       let newTaskText = inputTask.value.trim()
    31.       if (newTaskText !== '') {
    32.         arrList1[dataId - 1].push(newTaskText)
    33.         localStorage.setItem('arr', JSON.stringify(arrList1))
    34.         //更新未完成事件界面
    35.         renderUnfinished()
    36.         //将input设为空
    37.         inputTask.value = ''
    38.       }
    39.     }
    40.   })
    41.  
    42.   // 点击tabs
    43.   let tabs = document.querySelector('.tabs')
    44.   tabs.addEventListener('click', function (e) {
    45.     if (e.target.tagName === 'DIV' && e.target.hasAttribute('data-id')) {
    46.       document.querySelector('.tabs .active').classList.remove('active')
    47.       e.target.classList.add('active')
    48.       // 判断到第几个note
    49.       console.log(dataId)
    50.       dataId = +e.target.dataset.id
    51.       console.log(dataId)
    52.       // console.log(dataId)
    53.       document.querySelector('.content .active').classList.remove('active')
    54.       document.querySelector(`.content .note:nth-child(${dataId})`).classList.add('active')
    55.       // 更新两个界面
    56.       // renderFinished()
    57.       // renderUnfinished()
    58.       bindEventListeners()
    59.     }
    60.   });
    61.  
    62.   // 绑定事件监听器
    63.   function bindEventListeners() {
    64.     let un_ul = document.querySelector(`.note:nth-child(${dataId}) .uul-unfinished`)
    65.     let ul = document.querySelector(`.note:nth-child(${dataId}) .uul-finished`)
    66.     let text1 = document.querySelector(`.note:nth-child(${dataId}) .deleteAll`)
    67.  
    68.     // 删除未完成
    69.     un_ul.addEventListener('click', function (e) {
    70.       if (e.target.classList.contains('delete')) {
    71.         let dataID = parseInt(e.target.dataset.id)
    72.         arrList1[dataId - 1].splice(dataID, 1)
    73.         console.log(arrList1)
    74.         localStorage.setItem('arr', JSON.stringify(arrList1))
    75.         renderUnfinished()
    76.  
    77.       }
    78.     })
    79.  
    80.     // 删除已完成
    81.     ul.addEventListener('click', function (e) {
    82.       if (e.target.classList.contains('delete')) {
    83.         let dataID = parseInt(e.target.dataset.id)
    84.         // console.log(dataID)
    85.         arrList2[dataId - 1].splice(dataID, 1)
    86.  
    87.         localStorage.setItem('arr1', JSON.stringify(arrList2))
    88.         renderFinished()
    89.       }
    90.     })
    91.  
    92.     //删除全部已完成
    93.     text1.addEventListener('click', function (e) {
    94.       if (e.target.tagName === 'SPAN') {
    95.         arrList2[dataId - 1] = []
    96.         localStorage.setItem('arr1', JSON.stringify(arrList2))
    97.         renderFinished()
    98.       }
    99.     })
    100.  
    101.     // 点击未完成按钮任务变成完成
    102.     un_ul.addEventListener('click', function (e) {
    103.       if (e.target.classList.contains('finished')) {
    104.         let dataName = parseInt(e.target.dataset.name);
    105.         arrList2[dataId - 1].push(arrList1[dataId - 1][dataName]);
    106.         arrList1[dataId - 1].splice(dataName, 1);
    107.         localStorage.setItem('arr1', JSON.stringify(arrList2));
    108.         localStorage.setItem('arr', JSON.stringify(arrList1));
    109.         renderFinished();
    110.         renderUnfinished();
    111.       }
    112.     })
    113.  
    114.     // 时间提醒
    115.     un_ul.addEventListener('change', function (e) {
    116.       if (e.target && e.target.classList.contains('timeNum')) {
    117.         let timer = +e.target.value;
    118.         let time = setInterval(function () {
    119.           timer--;
    120.           let dataName = parseInt(e.target.dataset.name);
    121.           if (timer === 0) {
    122.             arrList2[dataId - 1].push(arrList1[dataId - 1][dataName]);
    123.             arrList1[dataId - 1].splice(dataName, 1);
    124.             localStorage.setItem('arr', JSON.stringify(arrList1));
    125.             localStorage.setItem('arr1', JSON.stringify(arrList2));
    126.             renderFinished();
    127.             renderUnfinished();
    128.             alert('滴滴，时间到');
    129.             clearInterval(time);
    130.           }
    131.         }, 1000)
    132.       }
    133.     })
    134.   }
    135.  
    136.   // 更新未完成
    137.   function renderUnfinished() {
    138.     let un_ul = document.querySelector(`.note:nth-child(${dataId}) .uul-unfinished`);
    139.     // if (!un_ul) {
    140.     //   console.error('Element .note:nth-child(${dataId}) .uul-unfinished is not found.');
    141.     //   return
    142.     // }
    143.     const listItems = JSON.parse(localStorage.getItem('arr'))[dataId - 1].map((taskText, index) => {
    144.       return `
    145.       
    147.         ${index}">
    148.         
      ${taskText}
    149.         
    150.           定时
    151.           
    152.         
    153.         
      ${index}">
    154.       
    155.     `
    156.     }).join('')
    157.     console.log(JSON.parse(localStorage.getItem('arr'))[dataId - 1])
    158.     un_ul.innerHTML = listItems
    159.   }
    160.  
    161.   // 更新已完成
    162.   function renderFinished() {
    163.     let ul = document.querySelector(`.note:nth-child(${dataId}) .uul-finished`)
    164.     // if (!ul) {
    165.     //   console.error('Element .note:nth-child(${dataId}) .uul-finished is not found.')
    166.     //   return
    167.     // }
    168.  
    169.     const listItems = JSON.parse(localStorage.getItem('arr1'))[dataId - 1].map((taskText, index) => {
    170.       return `
    171.       
    173.         ${index}">
    174.         
      ${taskText}
    175.         
    176.           定时
    177.           
    178.         
    179.         
      ${index}">
    180.       
    181.     `
    182.     }).join('')
    183.  
    184.     ul.innerHTML = listItems
    185.   }
    186.  
    187.  
    188.   // 显示当前时间
    189.   function showTime() {
    190.  
    191.     let date = new Date()
    192.  
    193.     // 年月日
    194.     let year = date.getFullYear()
    195.     let month = date.getMonth() + 1
    196.     let day = date.getDate()
    197.  
    198.     // 时分秒
    199.     let hour = date.getHours()
    200.     hour = hour < 10 ? '0' + hour : hour
    201.     let minute = date.getMinutes()
    202.     minute = minute < 10 ? '0' + minute : minute
    203.     let second = date.getSeconds()
    204.     second = second < 10 ? '0' + second : second
    205.  
    206.     // 显示
    207.     let element = document.getElementById('date')
    208.     element.innerHTML = '
      ' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + '
      '
    209.   }
    210.  
    211.   let ShowTime = window.setInterval(showTime, 1000)
    212.  
    213.   // 初始化事件监听器
    214.   bindEventListeners()
    215.  
    216. })
    217.  
    218.  
    219.  
    220.

    到这里就讲完了，感谢大家的观看，希望大家有所收获

  • 相关阅读:
    2023年 DevOps 七大趋势
    Spring 补充@Component 和 注入技巧 问题
    资源共享共赢系统应用
    socket学习二、accept、read、write函数详解
    小程序自定义组件(附“我的“页面item组件代码)
    开发人员必备的万能工具箱：He3
    设计模式之（7）——装饰设计模式
    65 编辑距离
    Hdfs存储策略
    图像细节提取算法
  • 原文地址：https://blog.csdn.net/2301_81253185/article/details/140924135