JS-记事本（代码）

最新推荐文章于 2024-01-06 08:59:49 发布
最新推荐文章于 2024-01-06 08:59:49 发布
阅读量1.1k 收藏 12
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/N_Huang/article/details/117283522
版权

JS-记事本（代码）

提示：该代码可直接使用，点击左边“+”号，新建一个记事本，在左边输入标题及标题后，点击保存，即会生成一个新的记事本，点击已有的记事本，可以对其进行编辑，编辑后可重新进行保存。（在没有需要编辑的记事本内容时，左边所有按钮不可用）
在这里插入图片描述
其中所使用的记事本图标：
在这里插入图片描述
也可根据自己需求自定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
   
            box-sizing: border-box;
        }
        ul{
   
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body,p{
   
            margin: 0;
        }
        .all{
   
            width: 100vw;
            height: 100vh;
            padding: 60px;
            display: flex;
        }
        .all aside{
   
            width: 300px;
            border: 1px #000 solid;
            height:100%;
            margin-right: 40px;
            padding: 20px;
        }
        .all aside input,.all aside textarea{
   
            width: 100%;
        }
        .all aside textarea{
   
            resize: none;
            height: 300px;
        }
        .btn{
   
            display: flex;
            height: 100px;
            justify-content: space-between;
            align-items: center;
        }
        .all button{
   
            width: 120px;
            height: 40px;
            border-radius: 15px;
            font-size: 26px;
        }
        .content{
   
            flex: 1;
            height:100%;
            border: 1px #000 solid;
            padding: 20px;
            overflow: hidden;
        }
        .text_list li{
   
            width: 120px;
            float: left;
            margin: 0
最低0.47元/天 解锁文章
N_Huang
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
一步步码记事本（Java版）--麻雀虽小五脏俱全
liangmy0518的博客
05-17 739
一步步码记事本（Java版）--麻雀虽小五脏俱全
用JavaScript操作本地存储制作一个记事本
qq_42853685的博客
09-25 2579
用JavaScript操作本地存储制作一个记事本1.介绍2.功能介绍3.主要技术4.具体步骤4.1 页面布局4.2 CSS文件4.2 编写js文件4.2.1 输入框的鼠标弹起事件4.2.2 获取本地存储数据与保存本地存储的数据4.2.3 渲染页面4.2.4 点击复选框判断事件的完成状况4.2.5 点击小圆圈删除事件4.2.6 双击任务名并修改5.结束记事本到这儿就结束了，这是我第一次写技术博客...
使用JavaScript制作一个在线记事本
geng1025的博客
01-06 1448
数据加密：为了进一步保护用户的笔记，您可以添加一个数据加密功能。可以使用JavaScript的内置加密函数，如AES加密，来对存储在本地存储中的笔记进行加密和解密。历史记录：您可以添加一个历史记录功能，记录用户保存的笔记版本。这样，用户可以轻松地查看和恢复以前的笔记版本。标签管理：为了让笔记更加易于组织和查找，您可以添加一个标签管理系统。用户可以为每个笔记添加多个标签，并使用标签来过滤和搜索笔记。导出和导入功能。
用js写小黑记事本
bushanyanci_z的博客
05-12 250
【代码】用js写小黑记事本。
简易留言板
qq_40687516的博客
12-21 502
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
记事本编写Java代码
weixin_54877075的博客
07-30 8783
早期在我们没有接触自动构建工具时我们就会用到记事本来编写我们的代码，但记事本编写代码的前提下，需要安装好JDK和配置好Java环境变量；在我们编写前我们还需要了解什么是java的运行机制？...
Java程序设计-记事本的开发
11-05
而"sources"文件可能包含了项目的源代码，包括Java类文件和其他资源文件，这对于理解项目的实现逻辑和学习代码结构至关重要。 总的来说，"Java程序设计-记事本的开发"是一个融合了Java后端编程和Web前端技术的项目...
前端 vue源码-小黑记事本.rar
07-22
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。它以其易学易用、高效和可维护性而受到广大开发者喜爱。在这个“小黑记事本”的项目中，我们看到作者运用了Vue的核心概念来创建一个...
java编程-记事本-全部功能都实现.doc
09-30
【标签】中提到的"java JavaScript"暗示了这个项目可能涉及到两种编程语言：Java用于构建桌面应用程序，而JavaScript可能用于增强交互性或在前端部分提供某些功能。 从【部分内容】来看，代码是用Java Swing库来...
案例课程B-S架构-1期 详细设计书10-记事本模块.pdf
07-14
《案例课程B-S架构-1期 详细设计书10-记事本模块.pdf》是针对计算机领域，尤其是Web应用开发中的一个详细设计文档，它阐述了如何在OA系统中设计和实现记事本功能模块。该模块采用了标准的MVC架构，包括View层、...
GraalVM编译的Swing原生应用示例和源码-记事本文本编辑器
03-08
**GraalVM** 是一个高性能的运行时环境，它扩展了Java虚拟机（JVM）的功能，提供了原生编译、子集语言支持和JavaScript执行等特性。它旨在提高应用程序的启动速度和运行效率，尤其对于那些需要快速响应时间和低资源...
js-实现简单实用响应式日历日程记事本.zip
07-11
简单实用响应式日历日程记事本js插件代码下载。一款简单易用的日历每日事项记录，简单的电子日历记事本代码。支持撤销、添加、修改文字记录效果代码。
js之能力提高----网页记事本（javascript+html+css）
10-10
网页记事本（javascript+html+css） 不错的东西 以后大家可以在拓展功能 直接运行网页 先运行看看效果 在研读代码 提高你的js能力 祝你成功
调用本地记事本程序打开txt
11-15
实现调用本地记事本打开文件的简单例子，亲测可实现
JavaScript-日记本笔记本
weixin_44897872的博客
10-31 807
纯JavaScript写的日记本 所用到的一共两个页面一个是书写日记页面,在页面书写日记标题和日记内容, 第一个页面代码 <!DOCTYPE html> <html lang="en"> ​ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
js 数据写到本地记事本_正确的「记事本」打开方式：能渲染3D图像，还能玩贪吃蛇...
weixin_39824801的博客
11-19 118
金磊 发自 凹非寺量子位 报道 | 公众号 QbitAI渲染3D图像，一个「记事本」就够了。最近，GitHub上一名叫“Kyle Halladay”的小哥，便上传了这样一个项目，用记事本来渲染图像。效果是这样的：立方体旋转、阴影变化，还挺有内味的。还有贪吃蛇效果的：那么，小哥是如何拿记事本，就做到这些效果的呢？正确的「记事本」打开方式据小哥介绍，所有的输入和渲染效果，都是在记事本中完成。在此之前，...
C#实现简易记事本
weixin_50425831的博客
05-07 1957
本应用使用C#语言Windows窗体应用程序设计，是对Windows记事本部分简单功能的复现， 1.记事本界面及功能展示 2.界面设计过程 2.1 MenuStrip 从工具箱拖入Menustrip命名为menuStrip1 并在该menustrip下新建文件、新建、打开、保存、另存为、退出、编辑、撤销、剪切、复制、粘贴、删除、全选、日期、格式、自动换行、字体、查看、帮助、关于笔记本等上述ToolStripMenuItem。 Name属性依次更改为文件Too...
用记事本写java代码
m0_63562631的博客
07-28 4394
首先，使用记事本写java代码要配置好IDE和环境变量。同样的，写其他类型的代码也一样。这里仅写出java代码。 ps:我推荐使用Sublime Text记事本，不过用电脑自带的notepad++也可以。
windows记事本 3
m2857793138的博客
05-10 243
学习目标： 用c#语言实现记事本（代码） 学习内容： 完成群课件里面的实现记事本的开发应用 实验代码： using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windo
微信小程序记事本代码
最新发布
04-25
微信小程序记事本代码可以分为前端和后端两部分。前端部分主要负责用户界面的展示和交互，后端部分则处理数据的存储和读取。 前端代码示例： ```javascript // pages/index/index.js Page({ data: { notes: [], // 存储笔记列表 inputText: '', // 输入框内容 }, onLoad() { // 页面加载时从后端获取笔记列表 this.getNotes(); }, getNotes() { // 调用后端接口获取笔记列表 wx.request({ url: '后端接口地址', success: (res) => { this.setData({ notes: res.data, }); }, }); }, addNote() { // 添加笔记 const newNote = { content: this.data.inputText, time: new Date().getTime(), }; wx.request({ url: '后端接口地址', method: 'POST', data: newNote, success: () => { this.setData({ inputText: '', }); this.getNotes(); }, }); }, deleteNote(e) { // 删除笔记 const noteId = e.currentTarget.dataset.id; wx.request({ url: `后端接口地址/${noteId}`, method: 'DELETE', success: () => { this.getNotes(); }, }); }, }); ``` 后端代码示例： ```javascript // app.js const express = require('express'); const app = express(); const bodyParser = require('body-parser'); const fs = require('fs'); app.use(bodyParser.json()); // 获取笔记列表 app.get('/notes', (req, res) => { const notes = JSON.parse(fs.readFileSync('notes.json', 'utf8')); res.json(notes); }); // 添加笔记 app.post('/notes', (req, res) => { const notes = JSON.parse(fs.readFileSync('notes.json', 'utf8')); const newNote = req.body; notes.push(newNote); fs.writeFileSync('notes.json', JSON.stringify(notes)); res.sendStatus(200); }); // 删除笔记 app.delete('/notes/:id', (req, res) => { const notes = JSON.parse(fs.readFileSync('notes.json', 'utf8')); const noteId = req.params.id; const updatedNotes = notes.filter((note) => note.time !== parseInt(noteId)); fs.writeFileSync('notes.json', JSON.stringify(updatedNotes)); res.sendStatus(200); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 以上代码仅为示例，实际开发中还需要根据具体需求进行适当的修改和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值