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

handsome_xiang · 发表于 2025-8-14 01:30:40

感谢分享！

android · 发表于 2025-8-14 07:08:45

本帖最后由 android 于 2025-8-14 07:21 编辑

为什么我打开的界面跟你的不一样

879792799 · 发表于 2025-8-14 09:37:31

本帖最后由 879792799 于 2025-8-14 09:43 编辑

android 发表于 2025-8-14 07:08
为什么我打开的界面跟你的不一样

最上面心想事成是输入框你自己输入啊!!

android · 发表于 2025-8-14 11:30:52

879792799 发表于 2025-8-14 09:37
最上面心想事成是输入框你自己输入啊!!

好的，谢谢

yuping · 发表于 2025-8-15 22:51:48

网址是可以打开了，但是点击没反应，也新建不了文档，请问哪里出了问题

gah99sw · 发表于 2025-8-15 23:44:44

本帖最后由 gah99sw 于 2025-8-15 23:54 编辑

作者故意弄的用不成。直接说：请输入待办的事情，右边是删除。弄了一下午都没有明白怎么开始。
border-right:22px 每一行的高度不够

小栗子 · 发表于 2025-8-16 02:16:25

谢谢分享

小栗子 · 发表于 2025-8-16 02:16:54

谢谢分享

pc2012 · 发表于 2025-8-16 09:58:16

谢谢分享

879792799 · 发表于 2025-8-16 11:44:41

gah99sw 发表于 2025-8-15 23:44
作者故意弄的用不成。直接说：请输入待办的事情，右边是删除。弄了一下午都没有明白怎么开始。
border-ri ...

呵呵看样是搞定啦

我是菜鸟,期待大大分享一下你的改进版源码!!!!!

879792799 · 发表于 2025-8-16 11:48:06

yuping 发表于 2025-8-15 22:51
网址是可以打开了，但是点击没反应，也新建不了文档，请问哪里出了问题

估计 jquery.min.js 有问题, 没有放对位置[必须和网页文件在同级目录下] 或者文件名和源码上名称没有完全一样

gah99sw · 发表于 2025-8-16 17:57:10

本帖最后由 gah99sw 于 2025-8-16 18:06 编辑

879792799 发表于 2025-8-16 11:44
呵呵看样是搞定啦

我是菜鸟,期待大大分享一下你的改进版源码!!!!!

JS下了一堆，一代二代三代。最后不是版本问题。这个软件还是有点不友好。需要改进。复位，保存，删除，返回按钮多弄几个。鼠标带提示都可以。行的高度如何修改？WAMPSERVER2.4，用PHP访问mysql。我可以查询。下拉框。但是没有你的这么花哨。

RNM25728 · 发表于 2025-8-16 18:00:48

辛苦了。

makoto23 · 发表于 2025-8-16 18:15:08

帮顶

gah99sw · 发表于 2025-8-16 20:59:18

<!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: 100px;

  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: 50px;

}

/* 完成已完成设置位置 */
.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: 50px;

}

/*条目宽度*/
.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: 23px 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: 60px;

  width: 590px;
  text-align: center;

  font-size: 38px;

  border-left: 23px 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: 23px 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>

gah99sw · 发表于 2025-8-16 23:27:30

本帖最后由 gah99sw 于 2025-8-17 16:08 编辑

WIN+R，记事本，粘贴后另存为，UTF-8编码，所有文件，9.html。用浏览器打开，单击一下，到下面去了，单击一下，上来了，可以上下跑。做完的事情，中间是一根线穿过。WIN7 64位系统，运行没有问题。

yuping · 发表于 2025-8-17 00:14:46

879792799 发表于 2025-8-16 11:48
估计 jquery.min.js 有问题, 没有放对位置[必须和网页文件在同级目录下] 或者文件名和源码上名称没 ...

什么都没动，就是用的20楼的js和你发的index.html 这两个文件。。。还能有错？问题出在哪里

Zhengqiang5q · 发表于 2025-8-17 03:11:15

电脑小白一枚不懂就问？特别之处！有什么特别功能吗？

879792799 · 发表于 2025-8-17 07:05:21

Zhengqiang5q 发表于 2025-8-17 03:11
电脑小白一枚不懂就问？特别之处！有什么特别功能吗？

就是个代办清单多了个分类功能功能就这些!

879792799 · 发表于 2025-8-17 07:08:20

yuping 发表于 2025-8-17 00:14
什么都没动，就是用的20楼的js和你发的index.html 这两个文件。。。还能有错？问题出在哪里

这就怪了你确定没问题吗!!! 系统太老了? 实在不行换个浏览器试试我用的是谷歌浏览器

再不行直接删了

yesfei · 发表于 2025-8-17 08:19:06

谢谢分享。。

panrw2000 · 发表于 2025-8-17 12:50:42

支持，感谢分享

gah99sw · 发表于 2025-8-17 23:04:28

我发不了图片

879792799 · 发表于 2025-8-18 11:50:31

gah99sw 发表于 2025-8-17 23:04
我发不了图片

可惜了

肉仔 · 发表于 2025-8-18 14:35:07

仅供兴趣研究玩的!!

肉仔 · 发表于 2025-8-18 14:35:36

小网页而已

hu2036646 · 发表于 2025-8-19 08:31:01

感谢分享

小栗子 · 发表于 2025-8-19 10:04:34

谢谢分享

1e3e · 发表于 2025-8-19 10:08:36

不错啊谢谢分享

panman · 发表于 2025-8-19 10:21:36

这个项目我好像在GB看到有人做

		自动登录	找回密码
密码			注册

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

点评

点评

点评

点评

评分

点评

点评

点评

点评

点评

点评

浏览过的版块