前端：在线记事本（单文件，可分享）

已于 2024-08-13 17:54:02 修改
阅读量275 收藏
点赞数 9
分类专栏： 前端 文章标签： 前端 html5 css vue.js 前端框架
于 2024-08-13 17:52:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80404926/article/details/141169347
版权

目录

一、引言

二、项目展示

1.主界面

2.添加任务

3.储存功能

4.删除功能

5.其他功能

三、技术要点

四、代码 

五、下载链接

六、结束语

感谢观看！您的支持是我最大的动力！

一、引言

在网上的某马那里学习了前端，在学Vue的时候有一个令我感兴趣的小案例（小黑记事本），于是稍微改了一下界面，增加了本地存储功能，做成了这个小项目

为了便于分享，遂把html,css和js放在了一起（当然平常不推荐这么做），背景图片也使用了在线图片，vue导包也是如此，故即使不访问服务器该文件仍需联网使用

推荐使用电脑打开，手机也可用浏览器打开（推荐横屏），需要的可在文末处自行下载

注意：该文件只用于交流学习！请勿商用！

二、项目展示

1.主界面

2.添加任务

可通过输入任务后回车或点击“添加任务”按钮来添加任务

3.储存功能

刷新或关掉浏览器后重新打开数据依然存在

4.删除功能

鼠标移动到任务模块上（或手机端手指点击任务）会出现删除按钮，点击按钮删除任务

5.其他功能

左下角有任务数量统计

点击右下角可清空任务

三、技术要点

localStorage浏览器本地存储

watch监视器（Vue基本功能等）

四、代码 

<!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>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background: #fff;
        }

        button {
            margin: 0;
            padding: 0;
            border: 0;
            background: none;
            font-size: 100%;
            vertical-align: baseline;
            font-family: inherit;
            font-weight: inherit;
            color: inherit;
            -webkit-appearance: none;
            appearance: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height: 1.4em;
            background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6e920f9d0627d3222fb40442101e9a5b.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            color: #000000;
            min-width: 230px;
            max-width: 550px;
            margin: 0 auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-weight: 300;
        }

        :focus {
            outline: 0;
        }

        .hidden {
            display: none;
        }

        #app {
            background: rgba(255, 255, 255, 0.95);
            margin: 180px 0 40px 0;
            padding: 15px;
            position: relative;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
        }

        #app .header input {
            border: 2px solid rgba(36, 75, 36, 0.8);
            border-radius: 10px;
            white-space: pre-wrap;
            padding-right: 28.5%;

        }

        #app .add {
            position: absolute;
            right: 15px;
            top: 15px;
            height: 68px;
            width: 140px;
            text-align: center;
            background-color: rgba(36, 75, 36, 0.8);
            color: #fff;
            cursor: pointer;
            font-size: 18px;
            border-radius: 0 10px 10px 0;
        }

        #app input::-webkit-input-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        #app input::-moz-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        #app input::input-placeholder {
            font-style: italic;
            font-weight: 300;
            color: rgb(120, 120, 120);
        }

        #app h1 {
            position: absolute;
            top: -120px;
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 60px;
            font-weight: 100;
            text-align: center;
            color: rgba(255, 255, 255, 0.95);
            -webkit-text-rendering: optimizeLegibility;
            -moz-text-rendering: optimizeLegibility;
            text-rendering: optimizeLegibility;
        }

        .new-todo,
        .edit {
            position: relative;
            margin: 0;
            width: 100%;
            font-size: 24px;
            font-family: inherit;
            font-weight: inherit;
            line-height: 1.4em;
            border: 0;
            color: inherit;
            padding: 6px;
            box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .new-todo {
            padding: 16px;
            border: none;
            background: rgba(0, 0, 0, 0.003);
            box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
        }

        .main {
            position: relative;
            z-index: 2;
        }

        .todo-list {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: hidden;
        }

        .todo-list li {
            position: relative;
            font-size: 24px;
            color: #000000;
            /* height: 60px; */
            box-sizing: border-box;
            border-bottom: 1px solid #e6e6e6;
        }

        .todo-list li:last-child {
            border-bottom: none;
        }

        .todo-list .view {
            width: 95%;
        }

        .todo-list .view .index {
            position: absolute;
            color: gray;
            left: 10px;
            top: 20px;
            font-size: 22px;
        }

        .todo-list li .toggle {
            text-align: center;
            width: 40px;
            /* auto, since non-WebKit browsers doesn't support input styling */
            height: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            border: none;
            /* Mobile Safari */
            -webkit-appearance: none;
            appearance: none;
        }

        .todo-list li .toggle {
            opacity: 0;
        }

        .todo-list li .toggle+label {

            background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
            background-repeat: no-repeat;
            background-position: center left;
        }

        .todo-list li .toggle:checked+label {
            background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
        }

        .todo-list li label {
            word-break: break-all;
            padding: 15px 15px 15px 60px;
            display: block;
            line-height: 1.2;
            transition: color 0.4s;
        }

        .todo-list li.completed label {
            color: #d9d9d9;
            text-decoration: line-through;
        }

        .todo-list li .destroy {
            display: none;
            position: absolute;
            top: 0;
            right: 10px;
            bottom: 0;
            width: 40px;
            height: 40px;
            margin: auto 0;
            font-size: 30px;
            color: #cc9a9a;
            margin-bottom: 11px;
            transition: color 0.2s ease-out;
        }

        .todo-list li .destroy:hover {
            color: #af5b5e;
        }

        .todo-list li .destroy:after {
            content: '×';
        }

        .todo-list li:hover .destroy {
            display: block;
        }

        .todo-list li .edit {
            display: none;
        }

        .todo-list li.editing:last-child {
            margin-bottom: -1px;
        }

        .footer {
            color: #777;
            padding: 10px 15px;
            height: 20px;
            text-align: center;
            border-top: 1px solid #e6e6e6;
        }

        .footer:before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 50px;
            overflow: hidden;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
                0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
                0 17px 2px -6px rgba(0, 0, 0, 0.2);
        }

        .todo-count {
            float: left;
            text-align: left;
        }

        .todo-count strong {
            font-weight: 300;
        }

        .filters {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            right: 0;
            left: 0;
        }

        .filters li {
            display: inline;
        }

        .filters li a {
            color: inherit;
            margin: 3px;
            padding: 3px 7px;
            text-decoration: none;
            border: 1px solid transparent;
            border-radius: 3px;
        }

        .filters li a:hover {
            border-color: rgba(175, 47, 47, 0.1);
        }

        .filters li a.selected {
            border-color: rgba(175, 47, 47, 0.2);
        }

        .clear-completed,
        html .clear-completed:active {
            float: right;
            position: relative;
            line-height: 20px;
            text-decoration: none;
            cursor: pointer;
        }

        .clear-completed:hover {
            text-decoration: underline;
        }

        .info {
            margin: 50px auto 0;
            color: #bfbfbf;
            font-size: 15px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            text-align: center;
        }

        .info p {
            line-height: 1;
        }

        .info a {
            color: inherit;
            text-decoration: none;
            font-weight: 400;
        }

        .info a:hover {
            text-decoration: underline;
        }

        @media screen and (-webkit-min-device-pixel-ratio: 0) {

            .toggle-all,
            .todo-list li .toggle {
                background: none;
            }

            .todo-list li .toggle {
                height: 40px;
            }
        }

        @media (max-width: 430px) {
            .footer {
                height: 50px;
            }

            .filters {
                bottom: 10px;
            }
        }
    </style>
</head>

<body>

    <!-- 主体区域 -->
    <section id="app">
        <!-- 输入框 -->
        <header class="header">
            <h1>小李记事本</h1>
            <input placeholder="请输入任务" class="new-todo" v-model="content" @keyup.enter="add(content)" />
            <button class="add" @click="add(content)">添加任务</button>
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item , index) in list" :key='item.id'>
                    <div class="view">
                        <span class="index">{{ index + 1 }}.</span> <label>{{ item.content }}</label>
                        <button class="destroy" @click="del(item.id)"></button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer">
            <!-- 统计 -->
            <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
            <!-- 清空 -->
            <button class="clear-completed" @click="clear()">
                清空任务
            </button>
        </footer>
    </section>

    <!-- 底部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const defaultList = [
            { id: 1, content: '吃饭' },
            { id: 2, content: '睡觉' },
            { id: 3, content: '打豆豆' },
            { id: 4, content: '跑步' }
        ]
        const app = new Vue({
            el: '#app',
            data: {
                content: '',
                list: JSON.parse(localStorage.getItem('toDoList')) || defaultList
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id !== id)
                },
                add(cont) {
                    if (this.content.trim() === '') {
                        alert("请输入任务后提交")
                        return
                    }
                    this.list.unshift({
                        id: + new Date(),
                        content: cont
                    })
                    this.content = ''
                },
                clear() {
                    this.list = []
                }
            },
            watch: {
                list(){
                    localStorage.setItem('toDoList' , JSON.stringify(this.list))
                }
            }
        })

    </script>
</body>

</html>

五、下载链接

通过百度网盘分享的文件：小李记事本.html
链接：https://pan.baidu.com/s/10B2NpQqL65ukjjUjMgnD9A?pwd=0813 
提取码：0813

六、结束语

感谢观看！您的支持是我最大的动力！

>>喜欢请三连加关注，冬码农持续创作优质作品中<<

希望与您一同成长！

冬有雪的学习之路
关注
  • 9
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端开发：Mac电脑修改hosts文件的方法
软贱开发攻城狮
07-28 1573
在前端开发过程中，除了直接进行代码开发需求之外，和前端开发相关的环境配置也是重要的知识内容，比如前端开发设计的环境搭建、编辑器的配置、依赖的安装，以及电脑本地的配置设置等，这些虽然和前端直接编码无关，但是会影响项目的正常运行。那么本篇博文就来分享一下经常遇到的知识点，通过Mac电脑进行前端编程开发的时候要修改hosts文件，实现访问，方便查阅使用。httpshttpshttpshttpshttpshttpshttpshttps。...
前端文件操作
2401_84092508的博客
04-22 1171
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取中…(img-TUWaoYZt-1713727294014)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
2024年Web前端最全实战：基于Node的控制台记事本开发，【2024前端最新学习路线
2401_84411018的博客
05-05 286
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。});})/**根据序号删除记录@param order 序号*/[外链图片转存中…(img-Aao4qxWD-1714847072836)][外链图片转存中…(img-2GggLeNX-1714847072837)]资料过多，篇幅有限。
实战：基于Node的控制台记事本开发
2401_84447362的博客
05-02 368
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记tml5 / css3 学习笔记**JavaScript 学习笔记Vue 学习笔记。
Uniapp微信小程序下载文件并分享记录
qq_52014374的博客
06-15 186
单纯 自己记录 当个记事本以后有需要直接拷贝。
Vue快速入门（附实战小项目：记事本、天气预报、音乐播放器）
2301_78416672的博客
04-20 735
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
2024年Web前端最全【经验分享】显示文件扩展名，一个三非渣本的前端校招秋招之路
2401_84438654的博客
05-04 370
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总如何在.java文件和记事本之间通过改扩展名快速切换呢？首先打开此电脑（我的电脑）找到左上角的这个东西。
web前端常见开发工具汇总 你用过几个？
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
10-30 3851
另一款名叫Hbuilder，这款IDE最吸引人的便是令人感到舒适的用户界面，试想在长期开发的工作压力下，生理心理方面都会有负面的反馈，这时一款美观的开发工具就显得尤为重要，不过相比之下，学长还是更喜欢vscode，各位感兴趣的小伙伴可以自行了解哦。这种方式的优点是成本低，入门门槛小，适合初学者进行一个浅层的理解与练习。第三个是中文汉化，vscode的汉化还是比较不错的，建议初学者都汉化一下，方便初始阶段的学习，当然资深开发者可以不装，毕竟外国的开发工具相似度很高，其实接触的时间长了，大部分英语很容易理解。
2024年最全实战：基于Node的控制台记事本开发，2024年最新前端优化性能的方法面试
2401_84433924的博客
05-14 726
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件代码// 引入文件模块// 引入逐行读取/**
课程设计之基于.Net在线记事本的设计
04-23
在线记事本是一种允许用户在Web环境下创建、编辑和存储文本的工具，类似于传统的桌面记事本程序，但具备网络同步和分享功能。 【描述解析】 描述中提到“该文件包括源码及相应文档”，意味着这份资料不仅包含了完成...
django-notepad:注意人员记事本
04-07
**标题解析：** "django-notepad" 是一个基于 Django 框架开发的应用程序，它被称为“注意人员记事本”。这表明它可能是一个用于个人或团队管理笔记、任务或提醒的工具，专为关注细节和组织信息的人设计。 **描述...
Note:过千帆的记事本
03-21
【描述】：“过千帆的记事本”是一个在线笔记应用或博客，提供了个人学习和知识分享的空间。用户可以在这里查找过千帆在不同领域的思考和实践，可能是编程、设计、项目管理等IT相关领域。通过这个平台，过千帆与读者...
html网页制作案例分享
06-15
1. **创建HTML文件**：使用文本编辑器（如记事本、Sublime Text或Visual Studio Code）新建一个文件，并将其命名为`index.html`。 2. **编写HTML代码**：按照案例中的结构和元素编写HTML代码。 3. **保存文件**：...
PHPWind论坛 记事本风格
11-28
在实际应用中，"记事本风格"的PHPWind论坛不仅仅是一个美观的主题，它还体现了开发者对用户体验、可维护性和扩展性的深刻理解。通过不断的迭代和优化，这种风格的论坛能够持续吸引用户并保持社区活跃。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 476
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1021
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端JS总结（中）
最新发布
m0_54066656的博客
08-12 604
前端JS之内置对象总结，这很重要！！！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 587
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冬有雪的学习之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值