肉仔 发表于 2025-8-18 14:35 哥 我是随便复制的 没注意看 为了早点升级 很牛逼的 |
这个项目我好像在GB看到有人做 |
不错啊谢谢分享 |
谢谢分享 |
感谢分享 |
仅供兴趣研究玩的!! |
gah99sw 发表于 2025-8-17 23:04 可惜了 ![]() |
支持,感谢分享 |
谢谢分享。。 |
yuping 发表于 2025-8-17 00:14 这就怪了 你确定没问题吗!!! 系统太老了? 实在不行 换个浏览器试试 我用的是谷歌浏览器 再不行 直接删了 ![]() |
Zhengqiang5q 发表于 2025-8-17 03:11 就是个代办清单 多了个分类功能 功能就这些! |
879792799 发表于 2025-8-16 11:48 什么都没动,就是用的20楼的js和你发的index.html 这两个文件。。。还能有错?问题出在哪里 |
本帖最后由 gah99sw 于 2025-8-17 16:08 编辑 WIN+R,记事本,粘贴后另存为,UTF-8编码,所有文件,9.html。用浏览器打开,单击一下, 到下面去了,单击一下,上来了,可以上下跑。做完的事情,中间是一根线穿过。WIN7 64位系统,运行没有问题。 |
<!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> <!--使用高版本jquery请调用jquery-migrate-1.2.1.min.js,低版本可不用--> </head> <body> <!-- 设置便签整体 --> <div class="entire"> <!-- 设置便签头部 --> <div class="header"> <!-- <div class="title">心平气和 </div>--> <input id="task" type="text" placeholder=" 在此输入 "> <!-- <input value="导入(txt/json)" type="file" class="btn-small action-import" id="importtt"> --> <!-- <input type="file" id="im.port-file" accept=".txt,.json" style="display:none"> --> </div> <!-- 设置中部 --> <div class="middle"> <!-- 设置中间tab栏部分 --> <div class="tabs"> <!-- 设置4个内容便签tab --> <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 18:06 编辑 879792799 发表于 2025-8-16 11:44 JS下了一堆,一代二代三代。最后不是版本问题。这个软件还是有点不友好。需要改进。复位,保存,删除,返回按钮多弄几个。鼠标带提示都可以。行的高度如何修改?WAMPSERVER2.4,用PHP访问mysql。我可以查询。下拉框。但是没有你的这么花哨。 |
yuping 发表于 2025-8-15 22:51 估计 jquery.min.js 有问题, 没有放对位置[必须和网页文件在同级目录下] 或者文件名和源码上名称没有完全一样 |
gah99sw 发表于 2025-8-15 23:44 呵呵 看样是搞定啦 ![]() 我是菜鸟,期待大大分享一下你的改进版源码!!!!! ![]() |
谢谢分享 |
谢谢分享 |
谢谢分享 |
879792799 发表于 2025-8-14 09:37 好的,谢谢 |
本帖最后由 879792799 于 2025-8-14 09:43 编辑 android 发表于 2025-8-14 07:08 最上面 心想事成是输入框 你自己输入啊!! |
Powered by Discuz! X3.3
© 2001-2017 Comsenz Inc.