todoList清单(HTML+CSS+JavaScript)

心.c 2024-08-17 15:35:02 阅读 57

🌏个人博客主页：

前言：前段时间学习了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和二维数组显示：

<code> // 判断到第几个note

let dataId = 1

//定义数组

if (!this.localStorage.getItem('arr')) {

localStorage.setItem('arr', "[[], [], [], []]")

} else if (!this.localStorage.getItem('arr1')) {

localStorage.setItem('arr1', "[[], [], [], []]")

}

//我的未完成数组

const arrList1 = JSON.parse(localStorage.getItem('arr'))

//我的已完成数组

const arrList2 = JSON.parse(localStorage.getItem('arr1'))

2 更新未完成和已完成：

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

// 更新未完成

function renderUnfinished() {

let un_ul = document.querySelector(`.note:nth-child(${dataId}) .uul-unfinished`);

const listItems = JSON.parse(localStorage.getItem('arr'))[dataId - 1].map((taskText, index) => {

return `

<li>

<a href="#" class="task-icon finished" data-name="${index}"></a>code>

<div class="center-item">${taskText}</div>code>

<div class="timing">code>

定时

<select data-name="${index}" id="timing-list" class="timeNum">code>

<option value="0">0min</option>code>

<option value="1">1min</option>code>

<option value="2">2min</option>code>

<option value="3">3min</option>code>

<option value="4">4min</option>code>

<option value="5">5min</option>code>

</select>

</div>

<div class="delete task-icon" data-id="${index}"></div>code>

</li>

}).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) => {