升级一下,我的本地离线网页TODO记事本,千万不要存放重要账户密码啊! - 无忧启动论坛

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 多行显示必须要word-wrap: break-word; ，不然无法数字不分行 */
/* 分类切换使用tab表示 */
/* 未完成使用AAA表示 */
/* 已完成使用BBB表示 */
/* 回收站使用CCC表示 */
/* 各个分类下条目内容使用note表示 */
/* 必须要box-sizing:border-box;不然li会出现许多奇怪不对齐问题 margin padding的值都会对UL条目产生影响 */
* {
margin: 0;
box-sizing:border-box;
}
a {
text-decoration: none;
}
body {
zoom: 56%;
margin-top: 20px;
height: 1000px;
}
.todo-body {
margin: auto;
width: 600px;
height: 1060px;
}
/* 回图标表示打开隐藏在上方的回收站 */
.button {
border-radius: 6px;
color: #505050;
text-align: center;
margin-top: 17px;
width: 44px;
font-size: 30px;
}
/* 删除样式就出乱了没办法 */
.bunengsan {
height: 39px;
}
/* 直接回车键完成输入只能键盘没有图标可供点击这样保持界面整洁简约*/
.header input {
margin: auto;
text-align: center;
margin-top: 6px;
font-size: 30px;
width: 539px;
height: 69px;
border-radius: 30px;
border: none;
outline: none;
color: #505050;
box-shadow: 5px 5px 15px rgb(219, 218, 218) inset, -5px -5px 10px #999999 inset;
}
input::placeholder {
color: #505050;
font-size: 29px;
}
/* 设置CCC区域与tabs区域保持样式相同*/
.CCCbody {
margin-left: 30px;
border-bottom: none;
}
/* tabs 表示中间一排分类切换按钮 */
.tabs {
margin: auto;
margin-top: 53px;
display: flex;
text-align: center;
border-bottom: 2px solid #e7b3b3;
}
.tabs div {
margin-left: 30px;
background-color: #546171;
border: 2px solid #e7b3b3;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom: none;
font-size: 39px;
cursor: pointer;
color: #000000;
box-shadow: 5px 5px 15px rgb(250, 241, 241) inset, -5px -5px 10px #fff inset;
}
.tabs .active {
background-color: #FD9900;
}
.content {
padding-top: 0px;
}
/* note表示每个tab下对应的内容*/
.note {
padding-top: 20px;
margin: auto;
width: 600px;
border-radius: 40px;
}
/* 设置各个tab面背景样式和文字颜色包括条目背景色*/
.note:nth-child(1) {
background-color: #fffefe;
}
.note:nth-child(2) {
background-color: #fffefe;
}
.note:nth-child(2) .AAA-item {
color: #ffffff;
}
.note:nth-child(3) {
background-color: #fffefe;
}
.note:nth-child(3) .AAA-item {
color: #ffffff;
}
.note:nth-child(4) {
background-color: #fffefe;
}
.note:nth-child(4) .AAA-item {
color: #ffffff;
}
.note:nth-child(5) {
background-color: #fffefe;
}
.note:nth-child(5) .AAA-item {
color: #ffffff;
}
/* 设置完成和未完成的框的大小和样式 */
.work-unfinished,
.work-finished,
.life-unfinished,
.life-finished,
.study-unfinished,
.study-finished,
.health-unfinished,
.health-finished,
.day-unfinished,
.day-finished {
margin: auto;
width: 600px;
border-radius: 15px;
border: #ffffff solid 3px;
}
/* 设置完成和未完成之间的间隔为20px */
.work-unfinished,
.life-unfinished,
.study-unfinished,
.health-unfinished,
.day-unfinished {
margin-bottom: 100px;
}
/* 设置完成和未完成的本身字体样式 */
.BiaoTi-text {
margin-bottom: 15px;
width: 190px;
height: 50px;
color: #FD9900;
text-align: left;
font-size: 50px;
text-align: left;
font-weight: bold;
}
/* 完成未完成本身设置位置 */
.work-unfinished .BiaoTi-text,
.life-unfinished .BiaoTi-text,
.study-unfinished .BiaoTi-text,
.health-unfinished .BiaoTi-text,
.day-unfinished .BiaoTi-text {
margin-left: 0px;
text-align: left;
font-size: 35px;
}
/* 完成已完成本身设置位置 */
.work-finished .BiaoTi-text,
.life-finished .BiaoTi-text,
.study-finished .BiaoTi-text,
.health-finished .BiaoTi-text,
.day-finished .BiaoTi-text {
margin-left: 0px;
color: #505050;
text-align: left;
font-size: 35px;
}
/* 隐藏滚动条 */
.CCC::-webkit-scrollbar,
.AAA::-webkit-scrollbar,
.BBB::-webkit-scrollbar {
width: 0;
}
/* 设置页面内各个未完成AAA*/
.AAA li {
margin-top: 6px;
margin-left: -45px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
display: flex;
width: 600px;
text-align: center;
font-size: 31px;
border-right: 12px solid #7BB01A;
}
/* 已完成BBB*/
.BBB li {
margin-top: 6px;
margin-left: -45px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
display: flex;
width: 600px;
text-align: center;
font-size: 26px;
border-right: 12px solid #7BB01A;
}
/* 回收站CCC*/
.CCC li {
margin-top: 6px;
margin-left: -76px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
display: flex;
width: 608px;
text-align: center;
font-size: 31px;
}
/* 条目宽度必须要设置好上面的li也必须设置好一起配合才能正确显示*/
.AAA-item,
.BBB-item,
.CCC-item {
width: 544px;
text-align: left;
margin-left: 10px;
word-wrap: break-word;
color: #ffffff;
padding: 5px;
}
/* 回收站恢复 */
.CC-iconHuiFu {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 30px solid #40f136;
}
/* 回收站删除 */
.CC-iconDEL {
border-right: 26px solid #FD0164;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* 设置各个条目图标qian面删除图标 */
/* 已完成和未完成前面的红色图标*/
.AABB-iconDEL {
border-left: 12px solid #FD0164;
width: 15px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* 设置页面内各个条目的外框重要 */
.CCC li,
.work-unfinished .AAA li,
.work-finished .BBB li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.life-unfinished .AAA li,
.life-finished .BBB li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.study-unfinished .AAA li,
.study-finished .BBB li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.health-unfinished .AAA li,
.health-finished .BBB li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.day-unfinished .AAA li,
.day-finished .BBB li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
/* 设置已完成文字样式*/
.BBB .BBB-item {
text-decoration: line-through;
color: #AC7F79;
}
.life-finished .BBB .BBB-item {
text-decoration: line-through;
color: #AC7F79;
}
.study-finished .BBB .BBB-item {
text-decoration: line-through;
color: #AC7F79;
}
.health-finished .BBB .BBB-item {
text-decoration: line-through;
color: #AC7F79;
}
.day-finished .BBB .BBB-item {
text-decoration: line-through;
color: #AC7F79;
}
/* 设置tab内容不可看 */
.note {
display: none;
}
/* 设置tab内容可看 */
.content .active {
display: block;
}
.text {
display: flex;
}
/* 每天重心开始 */
.deleteAll {
width: 100px;
height: 50px;
margin-top: 9px;
margin-right: 10px;
}
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="todo-body">
<div class="header">
<div class="CCCbody">
<div id="down-buttoon" style="display: none;">
<button class="button" onclick=exportLocalStorageAsJson()
style="width: 320px;margin-left: 39px;margin-bottom: 25px;">下载备份所有分类数据</button>
<ul class="CCC"> </ul>
</div>
</div>
<button class="button" onclick="toggleSection('down-buttoon')" style="float: right;">回</button> <input
id="task" style="float: left; " type="text"
placeholder=" 不负今天 ">
<div class="bunengsan"> </div>
</div>
<div class="middle">
<div class="tabs">
<div class="work active" data-id="1">紧急</div>
<div class="life" data-id="2">重要</div>
<div class="study" data-id="3">家里</div>
<div class="health" data-id="4">目标</div>
<div class="day" data-id="5">仓库</div>
</div>
<div class="content">
<div class="note active">
<div class="work-unfinished">
<div class="BiaoTi-text">未完成</div>
<ul class="AAA"> </ul>
</div>
<div class="work-finished">
<div class="text">
<div class="BiaoTi-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="BBB"> </ul>
</div>
</div>
<div class="note">
<div class="life-unfinished">
<div class="BiaoTi-text">未完成</div>
<ul class="AAA"> </ul>
</div>
<div class="life-finished">
<div class="text">
<div class="BiaoTi-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="BBB"> </ul>
</div>
</div>
<div class="note">
<div class="study-unfinished">
<div class="BiaoTi-text">未完成</div>
<ul class="AAA"> </ul>
</div>
<div class="study-finished">
<div class="text">
<div class="BiaoTi-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="BBB"> </ul>
</div>
</div>
<div class="note">
<div class="health-unfinished">
<div class="BiaoTi-text">未完成</div>
<ul class="AAA"> </ul>
</div>
<div class="health-finished">
<div class="text">
<div class="BiaoTi-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="BBB"> </ul>
</div>
</div>
<div class="note">
<div class="day-unfinished">
<div class="BiaoTi-text">未完成</div>
<ul class="AAA"> </ul>
</div>
<div class="day-finished">
<div class="text">
<div class="BiaoTi-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="BBB"> </ul>
</div>
</div>
</div>
</div>
</div>
<script>
function exportLocalStorageAsJson() {
var localStoragedate = localStorage.getItem('AAAarry') + localStorage.getItem('BBBarry');
var data = JSON.stringify(localStoragedate); // 转换localStorage为JSON字符串
const blob = new Blob([data], {
type: "text/plain;charset=utf-8"
}); // 创建Blob对象
var url = URL.createObjectURL(blob); // 获取下载链接
var link = document.createElement('a');
link.href = url;
link.download = 'localStorage.json'; // 设置下载文件名
link.style.display = "none";
document.body.appendChild(link);
link.click(); // 触发下载
link.remove(); // 移除元素（可选）
alert(("本地数据已导出"));
}
function toggleSection(sectionId) {
var section = document.getElementById(sectionId);
section.style.display = section.style.display === 'none' ? 'block' : 'none';
}
window.addEventListener('load', function() {
// 判断到第几个tab
let dataId = 1
//定义数组
if (!this.localStorage.getItem('AAAarry')) {
localStorage.setItem('AAAarry', "[[], [], [], [],[]]")
} else if (!this.localStorage.getItem('CCCarry')) {
localStorage.setItem('CCCarry', "[[], [], [], [],[]]")
} else if (!this.localStorage.getItem('BBBarry')) {
localStorage.setItem('BBBarry', "[[], [], [], [],[]]")
}
const arrList1 = JSON.parse(localStorage.getItem('AAAarry'))
const arrList2 = JSON.parse(localStorage.getItem('BBBarry'))
const yinList = JSON.parse(localStorage.getItem('CCCarry'))
const yinListzi = [].concat(...yinList);
bindEventListeners()
// 如果按下了回车事件
let inputTask = document.querySelector('#task')
inputTask.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
let newTaskText = inputTask.value.trim()
if (newTaskText !== '') {
arrList1[dataId - 1].push(newTaskText)
localStorage.setItem('AAAarry', JSON.stringify(arrList1))
//更新未完成事件界面
renderUnfinished()
//将input设为空
inputTask.value = ''
}
}
})
// 点击tabs
var fntab = function(e) {
if (e.target.tagName === 'DIV' && e.target.hasAttribute('data-id')) {
document.querySelector('.tabs .active').classList.remove('active')
e.target.classList.add('active')
dataId = e.target.dataset.id
document.querySelector('.content .active').classList.remove('active')
document.querySelector(`.content .note:nth-child(${dataId})`).classList.add('active')
bindEventListeners()
event.stopPropagation()
}
};
///////////////////////自己定义三个函数////////////////////////////////////
//下面是删除隐藏用到的封装函数会直接修改原数组
function removeElement(AAAarry, element) {
for (let i = 0; i < AAAarry.length; i++) {
for (let j = 0; j < AAAarry[i].length; j++) {
if (AAAarry[i][j] === element) {
AAAarry[i].splice(j, 1); // 删除当前元素并跳出内层循环
break;
}
}
}
return AAAarry;
}
//下面是恢复隐藏用到的封装函数依据内容查找行号
function findNestedIndices(array, target) {
for (let i = 0; i < array.length; i++) {
for (let j = 0; j < array[i].length; j++) {
if (array[i][j] === target) {
return i;
}
}
}
return null;
}
//下面是恢复隐藏用到的封装函数依据二维数组行号插入某内容
function pushToRow(AAAarry, rowIndex, value) {
if (rowIndex >= AAAarry.length) return; // 检查索引是否有效
AAAarry[rowIndex].push(value);
}
//////////////////////////////////////////////////////////
// nxnx 每天重新开始把完成加入到未完成
var fnmtcx = function(e) {
if (e.target.tagName === 'SPAN') {
arrList1[dataId - 1].push(...arrList2[dataId - 1]);
arrList2[dataId - 1] = [];
localStorage.setItem('BBBarry', JSON.stringify(arrList2));
localStorage.setItem('AAAarry', JSON.stringify(arrList1));
bindEventListeners()
event.stopPropagation()
}
}
// 删除未完成 //nxnx 点击未完成变成完成
var fn = function(e) {
if (e.target.classList.contains('delete')) {
let index = parseInt(e.target.dataset.id)
// let dataName = parseInt(e.target.dataset.name);
const yinList = JSON.parse(localStorage.getItem('CCCarry')) //后加
const yinListzi = [].concat(...yinList); //后加
yinList[dataId - 1].push(arrList1[dataId - 1][index]);
arrList1[dataId - 1].splice(index, 1)
localStorage.setItem('AAAarry', JSON.stringify(arrList1))
localStorage.setItem('BBBarry', JSON.stringify(arrList2));
localStorage.setItem('CCCarry', JSON.stringify(yinList));
bindEventListeners()
event.stopPropagation()
}
if (e.target.classList.contains('AAA-item')) {
let dataName = parseInt(e.target.dataset.name);
const yinList = JSON.parse(localStorage.getItem('CCCarry')) //后加
const yinListzi = [].concat(...yinList); //后加
arrList2[dataId - 1].push(arrList1[dataId - 1][dataName]);
arrList1[dataId - 1].splice(dataName, 1);
localStorage.setItem('BBBarry', JSON.stringify(arrList2));
localStorage.setItem('AAAarry', JSON.stringify(arrList1));
bindEventListeners()
event.stopPropagation()
}
};
// 删除已完成 // 点击已完成按钮任务变成未完成
var fnyi = function(e) {
if (e.target.classList.contains('delete22')) {
let index = parseInt(e.target.dataset.id)
const yinList = JSON.parse(localStorage.getItem('CCCarry')) //后加
const yinListzi = [].concat(...yinList); //后加
yinList[dataId - 1].push(arrList2[dataId - 1][index]);
arrList2[dataId - 1].splice(index, 1)
// alert("标签页码yi==="+(dataId - 1));
localStorage.setItem('BBBarry', JSON.stringify(arrList2))
localStorage.setItem('CCCarry', JSON.stringify(yinList));
bindEventListeners()
event.stopPropagation()
}
if (e.target.classList.contains('BBB-item')) {
let dataName = parseInt(e.target.dataset.name);
const yinList = JSON.parse(localStorage.getItem('CCCarry')) //后加
const yinListzi = [].concat(...yinList); //后加
arrList1[dataId - 1].push(arrList2[dataId - 1][dataName]);
arrList2[dataId - 1].splice(dataName, 1);
localStorage.setItem('BBBarry', JSON.stringify(arrList2));
localStorage.setItem('AAAarry', JSON.stringify(arrList1));
bindEventListeners()
event.stopPropagation()
}
};
// 删除隐藏 // 恢复隐藏到未完成
var fyin = function(e) {
if (e.target.classList.contains('detyou')) {
//手机上无法使用 const yinListzi =yinList.flat()
let index = parseInt(e.target.dataset.id)
const yinList = JSON.parse(localStorage.getItem('CCCarry')) //必须要加
const yinListzi = [].concat(...yinList); //必须要加
const tetyin = yinListzi[index]; //必须要加
// alert("删除隐藏==="+(tetyin));
// alert("删除隐藏==="+(index));
removeElement(yinList, tetyin);
removeElement(yinList, "null");
// console.log('removeElement'+yinList);
yinListzi.splice(index, 1)
localStorage.setItem('CCCarry', JSON.stringify(yinList));
bindEventListeners()
event.stopPropagation()
$(`.AAA`).unbind("click").bind("click", fn); //未完成后加
}
if (e.target.classList.contains('detedetezuo')) {
let index = parseInt(e.target.dataset.id)
const yinList = JSON.parse(localStorage.getItem('CCCarry')) //必须要加
const yinListzi = [].concat(...yinList); //必须要加
const tetyin = yinListzi[index]; //必须要加
// alert("恢复隐藏==="+(index));
const indyinyin = findNestedIndices(yinList, tetyin);
// alert("恢复隐藏的行号==="+(indyinyin));
//二位数组行插入的文字
pushToRow(arrList1, 4, tetyin); //移动到仓库
yinListzi.splice(index, 1);
removeElement(yinList, tetyin);
removeElement(yinList, "null");
localStorage.setItem('CCCarry', JSON.stringify(yinList));
localStorage.setItem('AAAarry', JSON.stringify(arrList1))
localStorage.setItem('BBBarry', JSON.stringify(arrList2));
bindEventListeners()
event.stopPropagation()
$(`.AAA`).unbind("click").bind("click", fn); //未完成后加
}
event.stopPropagation()
$(`.AAA`).unbind("click").bind("click", fn); //未完成后加
};
///////////////////更新板块////////////////////////
// 更新隐藏
function renderyincang() {
let yin_ul = document.querySelector(`.CCC`);
const arrList1 = JSON.parse(localStorage.getItem('AAAarry'))
const arrList2 = JSON.parse(localStorage.getItem('BBBarry'))
const yinList = JSON.parse(localStorage.getItem('CCCarry'))
const yinListzi = [].concat(...yinList); //必须有
// console.log(yinListzi );
// console.log(yinList );
const listItems = yinListzi.map((taskText, index) => {
return ` <li>
<div class="detyou CC-iconDEL" data-id="${index}" > </div>
<div class="CCC-item" data-name="${index}" >${taskText}</div>
<div class="detedetezuo CC-iconHuiFu" data-id="${index}" > </div>
</li>
`
}).join('')
yin_ul.innerHTML = listItems
}
// 更新未完成
function renderUnfinished() {
let un_ul = document.querySelector(`.note:nth-child(${dataId}) .AAA`);
const arrList1 = JSON.parse(localStorage.getItem('AAAarry'))
const arrList2 = JSON.parse(localStorage.getItem('BBBarry'))
const yinList = JSON.parse(localStorage.getItem('CCCarry'))
const yinListzi = [].concat(...yinList);
const listItems = JSON.parse(localStorage.getItem('AAAarry'))[dataId - 1].map((taskText, index) => {
return ` <li>
<div class="delete AABB-iconDEL" data-id="${index}"> </div>
<div class="AAA-item" data-name="${index}">${taskText}</div>
</li>
`
}).join('')
un_ul.innerHTML = listItems
}
// 更新已完成
function renderFinished() {
let ul = document.querySelector(`.note:nth-child(${dataId}) .BBB`);
const arrList1 = JSON.parse(localStorage.getItem('AAAarry'))
const arrList2 = JSON.parse(localStorage.getItem('BBBarry'))
const yinList = JSON.parse(localStorage.getItem('CCCarry'))
const yinListzi = [].concat(...yinList);
const listItems = JSON.parse(localStorage.getItem('BBBarry'))[dataId - 1].map((taskText, index) => {
return ` <li>
<div class="delete22 AABB-iconDEL" data-id="${index}"> </div>
<div class="BBB-item" data-name="${index}">${taskText}</div>
</li>
`
}).join('')
ul.innerHTML = listItems
}
// 绑定事件监听
function bindEventListeners() {
const arrList1 = JSON.parse(localStorage.getItem('AAAarry'))
const arrList2 = JSON.parse(localStorage.getItem('BBBarry'))
const yinList = JSON.parse(localStorage.getItem('CCCarry'))
const yinListzi = [].concat(...yinList);
renderUnfinished()
renderFinished()
renderyincang()
$(`.AAA`).unbind("click").bind("click", fn); //未完成AAA
$(`.BBB`).unbind("click").bind("click", fnyi); //已完成BBB
$(`.CCC`).unbind("click").bind("click", fyin); //回收站CCC
$(".tabs").unbind("click").bind("click", fntab); //分类标签
$(`.deleteAll`).unbind("click").bind("click", fnmtcx); //每天重新来
};
bindEventListeners()
})
</script>
</body>
</html>

复制代码