【短平快】比记事本更好用的离线本地存储网页[念念不忘,必有返响]记事本! - 无忧启动论坛

<!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>
* {
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
body {
zoom: 56%;
margin-top: 20px;
height: 1000px;
background-repeat: no-repeat;
}
.entire {
margin: auto;
width:600px;
height: 1060px;
}
.button {
border-radius: 6px;
color: #505050;
}
/* 心平气和 */
.title {
margin: auto;
width: 180px;
height: 44px;
font-size: 39px;
border-radius: 20px;
text-align: center;
margin-top: 9px;
color: #FD6600;
box-shadow: 5px 5px 15px rgb(201, 188, 198) inset, -5px -5px 10px #999999 inset;
}
.header input {
margin: auto;
text-align: center;
margin-top: 60px;
font-size: 30px;
width: 600px;
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;
}
.tabs {
margin: auto;
margin-top: 33px;
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 {
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) .center-item {
color: #ffffff;
}
.note:nth-child(3) {
background-color: #fffefe;
}
.note:nth-child(3) .center-item {
color: #ffffff;
}
.note:nth-child(4) {
background-color: #fffefe;
}
.note:nth-child(4) .center-item {
color: #ffffff;}
.note:nth-child(5) {
background-color: #fffefe;
}
.note:nth-child(5) .center-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;
}
/* 设置完成和未完成的字体样式 */
.note-text {
margin-bottom: 15px;
width: 190px;
height: 50px;
color: #FD9900;
text-align: left;
font-size: 50px;
text-align: left;
font-weight:bold;
}
/* 完成未完成设置位置 */
.work-unfinished .note-text,
.life-unfinished .note-text,
.study-unfinished .note-text,
.health-unfinished .note-text,
.day-unfinished .note-text {
margin-left: 0px;
text-align: left;
font-size: 35px;
}
/* 完成已完成设置位置 */
.work-finished .note-text,
.life-finished .note-text,
.study-finished .note-text,
.health-finished .note-text,
.day-finished .note-text {
margin-left: 0px;
color: #505050;
text-align: left;
font-size: 35px;
}
/*条目宽度*/
.uul-unfinished,
.uul-finished {
display: block;
width: 600px;
overflow-y: hidden;
overflow-x: hidden;
}
/* 隐藏滚动条 */
.uul-unfinished::-webkit-scrollbar,
.uul-finished::-webkit-scrollbar {
width: 0;
}
/* 设置页面内各个条目的重要 */
.uul-unfinished li {
margin-top: 6px;
margin-left: -39px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
display: flex;
height: 51px;
width: 590px;
text-align: center;
font-size: 35px;
border-left: 12px solid #7BB01A;
}
.uul-finished li {
margin-top: 6px;
margin-left: -39px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
display: flex;
height: 33px;
width: 590px;
text-align: center;
font-size: 26px;
border-left: 12px solid #7BB01A;
}
/* 设置页面内各个条目的外框重要 */
.work-unfinished .uul-unfinished li,
.work-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.life-unfinished .uul-unfinished li,
.life-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.study-unfinished .uul-unfinished li,
.study-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.health-unfinished .uul-unfinished li,
.health-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.day-unfinished .uul-unfinished li,
.day-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.center-item {
width: 570px;
height: 39px;
text-align: left;
margin-left: 10px;
overflow-y: hidden;
overflow-x: hidden;
color: #ffffff;
}
/* 设置已完成文字样式*/
.uul-finished .center-item {
text-decoration: line-through;
color:#AC7F79;
}
.life-finished .uul-finished .center-item {
text-decoration: line-through;
color:#AC7F79;
}
.study-finished .uul-finished .center-item {
text-decoration: line-through;
color: #AC7F79;
}
.health-finished .uul-finished .center-item {
text-decoration: line-through;
color: #AC7F79;
}
.day-finished .uul-finished .center-item {
text-decoration: line-through;
color: #AC7F79;
}
/* 设置各个条目图标后面删除图标*/
.task-iconsan {
border-right: 10px solid #FD0164;
width:15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 设置变签内容不可看 */
.note {
display: none;
}
/* 设置变迁内容可看 */
.content .active {
display: block;
}
/* 设置完成文字图片在一排 */
.text {
display: flex;
}
/* 每天重心开始 */
.deleteAll {
cursor: pointer;
width: 100px;
height: 50px;
margin-top: 9px;
margin-right: 10px;
}
.text img {
width: 0px;
height: 0px;
border-radius: 0px;
margin-right: 10px;
margin-left: 10px;
margin-top: 4px;
}
/*全部删除这几个字*/
.text span {
width: 120px;
height: 40px;
text-align: center;
vertical-align: middle;
color: #000000;
font-size: 20px;
padding: 4px;
border-radius: 15px;
border: 1px solid rgb(255, 217, 142);
}
</style>
<script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
<div class="entire">
<div class="header">
<input id="task" type="text" placeholder=" 心想事成 ">
</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="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="work-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="life-unfinished">
<div class="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="life-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="study-unfinished">
<div class="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="study-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="health-unfinished">
<div class="note-text">未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="health-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="day-unfinished">
<div class="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="day-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('load', function () {
// 判断到第几个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'))
renderUnfinished()
renderFinished()
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('arr', JSON.stringify(arrList1))
//更新未完成事件界面
renderUnfinished()
//将input设为空
inputTask.value = ''
}
}
})
// 点击tabs
let tabs = document.querySelector('.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')
// 更新两个界面
renderFinished()
renderUnfinished()
bindEventListeners()
// alert("标签页码==="+(dataId - 1));
// e.stopPropagation()
event.stopPropagation()
// tabs.removeEventListener('click',fntab);
// tabs.addEventListener('click',fntab);
}};
// tabs.removeEventListener('click',fntab);
// tabs.addEventListener('click',fntab);
$(".tabs").unbind("click").bind("click",fntab);
///////////////////////自己定义函数////////////////////////////////////
//下面是全部重新开始
function exportLocalStorageAsJsonguili(e) {
const arrList1 = JSON.parse(localStorage.getItem('arr'))
const arrList2 = JSON.parse(localStorage.getItem('arr1'))
const arr=arrList1.map((row,index) => [...row, ...arrList2[index]]);
// arrList2 = [];
localStorage.setItem('arr1', "[[], [], [], [],[]]")
// localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr' , JSON.stringify(arr));
renderFinished();
renderUnfinished();
$(`.note:nth-child(${dataId}) .uul-unfinished`).unbind("click").bind("click",fnw);
$(`.note:nth-child(${dataId}) .uul-finished`).unbind("click").bind("click",fnni);
}
$(".guilin").unbind("click").bind("click",exportLocalStorageAsJsonguili);
///////////////////////////////////////////////////////////
// 绑定事件监听器
function bindEventListeners() {
let un_ul = document.querySelector(`.note:nth-child(${dataId}) .uul-unfinished`)
let ul = document.querySelector(`.note:nth-child(${dataId}) .uul-finished`)
let cxin = document.querySelector(`.note:nth-child(${dataId}) .deleteAll`)
// 删除未完成
var fn = function (e){
if (e.target.classList.contains('delete')){
let index = parseInt(e.target.dataset.id)
// alert("行号===="+(index));
arrList1[dataId - 1].splice(index, 1)
// alert("标签页码==="+(dataId - 1));
// console.log(dataId - 1);
localStorage.setItem('arr', JSON.stringify(arrList1))
renderUnfinished()
event.stopPropagation()
}};
$(`.note:nth-child(${dataId}) .uul-unfinished`).unbind("click").bind("click",fn);
// 删除已完成
var fnyi = function (e){
if (e.target.classList.contains('delete22')) {
let index = parseInt(e.target.dataset.id)
// alert("行号yi===="+(index));
// console.log(dataID)
arrList2[dataId - 1].splice(index, 1)
// alert("标签页码yi==="+(dataId - 1));
localStorage.setItem('arr1', JSON.stringify(arrList2))
renderFinished()
event.stopPropagation()
}};
$(`.note:nth-child(${dataId}) .uul-finished`).unbind("click").bind("click",fnyi);
// nxnx 每天重新开始就是把完成数组加入到未完成数组
cxin.addEventListener('click', function (e) {
if (e.target.tagName === 'SPAN') {
arrList1[dataId - 1] .push(...arrList2[dataId - 1]);
arrList2[dataId - 1] = [];
localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr' , JSON.stringify(arrList1));
renderFinished();
renderUnfinished();
}
})
// 点击未完成按钮任务变成完成
var fnw = function (e){
if (e.target.classList.contains('center-item')) {
let dataName = parseInt(e.target.dataset.name);
arrList2[dataId - 1].push(arrList1[dataId - 1][dataName]);
arrList1[dataId - 1].splice(dataName, 1);
localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr', JSON.stringify(arrList1));
renderFinished();
renderUnfinished();
}};
$(`.note:nth-child(${dataId}) .uul-unfinished`).unbind("click").bind("click",fnw);
$(`.note:nth-child(${dataId}) .uul-unfinished`).bind("click",fn);
//nxnx 点击yiyiyi完成按钮任务变成完成
var fnni = function (e){
if (e.target.classList.contains('center-item')) {
let dataName = parseInt(e.target.dataset.name);
arrList1[dataId - 1].push(arrList2[dataId - 1][dataName]);
arrList2[dataId - 1].splice(dataName, 1);
localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr', JSON.stringify(arrList1));
renderFinished();
renderUnfinished();
}};
$(`.note:nth-child(${dataId}) .uul-finished`).unbind("click").bind("click",fnni);
$(`.note:nth-child(${dataId}) .uul-finished`).bind("click",fnyi);
}
// 更新未完成
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>
<div class="center-item" data-name="${index}" >${taskText}</div>
<div class="delete task-iconsan" data-id="${index}" > </div>
</li>
`
}).join('')
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 `
<li>
<div class="center-item" data-name="${index}" >${taskText}</div>
<div class="delete22 task-iconsan" data-id="${index}" > </div>
</li>
`
}).join('')
ul.innerHTML = listItems
}
})
</script>
</body>
</html>

复制代码