[color=]提醒 必须要有jquery才能运行!! 网上有!
千万不要存放重要账户密码啊不安全的!
=========================================================================
补充一:概述
模仿一下知行合一的话来说: 记事本是知,TODO是行,不停筛选加上不停坚持才能合一.
=========================================================================
本人菜鸟升级一下,我的本地离线网页TODO记事本,千万不要存放重要账户密码啊!
祝论坛大佬们及诸位大大们2026新年快乐!!!!!!
感谢原作者:原帖是https://blog.csdn.net/2301_81253 ... ails/140924135-----有点问题我已修复
之前版本介绍详细些:http://bbs.wuyou.net/forum.php?mod=viewthread&tid=447222&extra=
源码可以自行修改成自己的效果,界面与众不同,需要耐心,习惯了就简单,如果在电脑上使用,打开浏览器调试模式把界面调宽一点,不会请百度哈!
升级内容: 现在可以 支持多行, 支持回收站,支持数据下载备份.把代码命名尽量明了一些.
输入匡必须回车键录入,无法输入请重启机器再试一试,
红色按钮是删除,上面回收站绿色按钮[其余绿色按钮是摆设]是恢复到仓库分类下
代码里有注释,我是菜鸟水平一般只能尽力,见谅啊!
[ol]
Document
/* 多行显示必须要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;
}
}
下载备份所有分类数据
回
紧急
重要
家里
目标
仓库
未完成
已完成
每天重❤来
未完成
已完成
每天重❤来
未完成
已完成
每天重❤来
未完成
已完成
每天重❤来
未完成
已完成
每天重❤来
[/ol]复制代码
