用HTML写一个简单的记事本【亲测有效】

CZ工作室官方

已于 2023-06-05 22:02:50 修改

阅读量923

点赞数

文章标签： css css3 html

于 2023-06-05 22:00:02 首次发布

本文链接：https://blog.csdn.net/chenzhi0122/article/details/131057077

版权

该文章展示了一个简单的HTML记事本应用，利用contenteditable属性创建可编辑区域，并通过JavaScript监听保存按钮事件，将用户输入的内容存储到浏览器的localStorage中。当页面重新加载时，如果之前有保存的内容，会自动恢复显示。

摘要由CSDN通过智能技术生成

用HTML做的一个记事本，每一次保存都会更新其内容，代码如下：

<!DOCTYPE html>
<html>
<head>
 <title>CZ记事本</title>
 <meta charset="UTF-8">
 <style>
  body {
   font-family: Arial, sans-serif;
   background-color: #f5f5f5;
   margin: 0;
   padding: 0;
  }  #editor {
   width: 80%;
   min-height: 400px;
   margin: 50px auto;
   background-color: white;
   border: 1px solid #ddd;
   padding: 10px;
   font-size: 16px;
   line-height: 1.4;
  }

  #saveBtn {
   background-color: #4CAF50;
   color: white;
   padding: 10px 20px;
   border: none;
   cursor: pointer;
   margin: 20px 0;
  }

  #saveBtn:hover {
   background-color: #3e8e41;
  }
 </style>
</head>
<body>
 <div id="editor" contenteditable="true">
  
 </div>
 <button id="saveBtn">保存</button>
 <script>
  var editor = document.getElementById("editor");
  var saveButton = document.getElementById("saveBtn");

  saveButton.onclick = function() {
   var content = editor.innerHTML;
   localStorage.setItem("editor-content", content); //将内容存储到本地存储中
   alert("已成功保存！");
  }

  var savedContent = localStorage.getItem("editor-content");
  if(savedContent !== null) {
   editor.innerHTML = savedContent;
  }
 </script>
</body>
</html>