基于JavaScript开发网页日记应用-猿码集

介绍

现代人们生活节奏加快，很多人没时间手写纸质日记了，有不少人选择使用网页日记应用来记录自己的生活点滴。今天我们将介绍如何基于JavaScript开发一款网页日记应用。

技术栈

我们将使用以下技术来开发网页日记应用：

HTML5 - 构建网页

CSS - 美化网页

JavaScript - 实现交互逻辑和功能

localStorage - 存储日记

功能需求

我们将开发以下功能：

添加新日记

删除日记

编辑日记

查看日记

布局

我们的网页日记应用有两个主要界面：添加日记界面和日记列表界面。添加日记界面用于添加新日记，而日记列表界面用于列出已经添加的日记，同时也提供了删除和编辑功能。

添加日记界面:

日记列表界面:

实现步骤

1. 设计HTML结构和CSS样式

我们先设计好网页的HTML结构和CSS样式，保证网页可以正常显示并且美观。具体的代码实现如下：


<!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-UA-Compatible" content="ie=edge">
    <title>网页日记应用</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <h1>网页日记应用</h1>
    </div>
    <div class="container">
        <div class="add-diary">
            <h2>添加新日记</h2>
            <form action="#" method="POST">
                <label for="diary-title">标题：</label>
                <input type="text" id="diary-title" name="title" required>
                <br>
                <br>
                <label for="diary-content">内容：</label>
                <textarea id="diary-content" name="content" rows="10" cols="50" required></textarea>
                <br>
                <br>
                <button type="submit" id="add-diary-btn">添加</button>
            </form>
        </div>
        <div class="diary-list">
            <h2>日记列表</h2>
            <ul id="diarys">
                <!-- diary items will be appened here dynamically by javascript -->
            </ul>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>


body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
.header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    text-align: center;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 30px;
}
.container .add-diary {
    width: 300px;
    margin: 20px;
}
.container .diary-list {
    width: 600px;
    margin: 20px;
}
.container h2 {
    color: #4CAF50;
    font-size: 24px;
    margin-bottom: 10px;
}
.add-diary form {
    display: flex;
    flex-direction: column;
}
.add-diary input,
.add-diary textarea {
    margin-bottom: 20px;
}
.add-diary label {
    font-weight: bold;
}
.add-diary button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}
.diary-list li {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #f0f0f0;
}
.diary-list li:hover {
    background-color: #ddd;
}
.edit-mode li input[type="text"],
.edit-mode li textarea {
    display: block;
    margin-bottom: 10px;
}

2. 编写JavaScript代码

2.1 添加新日记

当表单提交时，我们需要将表单中的数据存储到localStorage中。同时，我们还需要根据存储的数据更新日记列表。


const addDiaryForm = document.querySelector(".add-diary form");
const diaryList = document.getElementById("diarys");
addDiaryForm.addEventListener("submit", function(e) {
    e.preventDefault();
    const titleInput = document.getElementById("diary-title");
    const contentTextarea = document.getElementById("diary-content");
    const title = titleInput.value;
    const content = contentTextarea.value;
    if (title.trim() === "" || content.trim() === "") {
        alert("标题和内容不能为空！");
        return;
    }
    const diary = {
        id: new Date().toISOString(),
        title,
        content
    };
    saveDiary(diary);
    titleInput.value = "";
    contentTextarea.value = "";
    addDiaryToList(diary);
    alert("日记添加成功！");
}); 
function saveDiary(diary) {
    const diarys = JSON.parse(localStorage.getItem("diarys")) || [];
    diarys.push(diary);
    localStorage.setItem("diarys", JSON.stringify(diarys));
}
function addDiaryToList(diary) {
    const li = document.createElement("li");
    li[xss_clean] = `
        <div>
            <h4>${diary.title}</h4>
            ${diary.content}
        </div>
        <div>
            <button class="delete-btn">删除</button>
            <button class="edit-btn">编辑</button>
        </div>
    `;
    li.setAttribute("data-id", diary.id);
    diaryList.appendChild(li);
    // 绑定按钮事件
    const deleteBtn = li.querySelector(".delete-btn");
    const editBtn = li.querySelector(".edit-btn");
    deleteBtn.addEventListener("click", handleDelete);
    editBtn.addEventListener("click", handleEdit);
}

2.2 删除日记

当用户点击删除按钮时，我们需要从localStorage中删除该日记，并对日记列表进行更新。


function handleDelete(e) {
    const li = e.target.closest("li");
    const id = li.getAttribute("data-id");
    deleteDiaryById(id);
    li.remove();
}
function deleteDiaryById(id) {
    const diarys = JSON.parse(localStorage.getItem("diarys")) || [];
    const newDiarys = diarys.filter(function(diary) {
        return diary.id !== id;
    });
    localStorage.setItem("diarys", JSON.stringify(newDiarys));
    alert("日记删除成功！");
}

2.3 编辑日记

当用户点击编辑按钮时，我们需要将该日记的标题和内容显示在表单中，用户可以修改后进行保存。


function handleEdit(e) {
    const li = e.target.closest("li");
    const id = li.getAttribute("data-id");
    li.classList.add("edit-mode");
    const div = li.querySelector("div:first-child");
    const title = div.querySelector("h4").textContent;
    const content = div.querySelector("p").textContent;
    div[xss_clean] = `
        <div>
            <input type="text" value="${title}" required>
            <textarea rows="5" required>${content}</textarea>
        </div>
        <div>
            <button class="save-btn">保存</button>
            <button class="cancel-btn">取消</button>
        </div>
    `;
    // 绑定按钮事件
    const saveBtn = div.querySelector(".save-btn");
    const cancelBtn = div.querySelector(".cancel-btn");
    saveBtn.addEventListener("click", function(e) {
        const newTitle = div.querySelector("input").value;
        const newContent = div.querySelector("textarea").value;
        if (newTitle.trim() === "" || newContent.trim() === "") {
            alert("标题和内容不能为空！");
            return;
        }
        updateDiaryById(id, newTitle, newContent);
        li.classList.remove("edit-mode");
        div[xss_clean] = `
            
${newTitle}
 
            ${newContent}
        `;
    });
    cancelBtn.addEventListener("click", function(e) {
        li.classList.remove("edit-mode");
        div[xss_clean] = `
            
${title}
 
            ${content}
        `;
    });
}
function updateDiaryById(id, newTitle, newContent) {
    const diarys = JSON.parse(localStorage.getItem("diarys")) || [];
    const diary = diarys.find(function(diary) {
        return diary.id === id;
    });
    diary.title = newTitle;
    diary.content = newContent;
    localStorage.setItem("diarys", JSON.stringify(diarys));
    alert("日记更新成功！");
}

2.4 查看日记

当用户点击日记列表中的某个日记时，我们需要显示该日记的详情。我们可以使用模态框实现。


const modal = document.getElementById("modal");
const closeModalBtn = modal.querySelector(".close-btn");
diaryList.addEventListener("click", function(e) {
    const li = e.target.closest("li");
    const diary = getDiaryById(li.getAttribute("data-id"));
    if (diary) {
        modal.classList.add("show");
        modal.querySelector("h2").textContent = diary.title;
        modal.querySelector("p").textContent = diary.content;
    }
});
closeModalBtn.addEventListener("click", function(e) {
    modal.classList.remove("show");
});
function getDiaryById(id) {
    const diarys = JSON.parse(localStorage.getItem("diarys")) || [];
    return diarys.find(function(diary) {
        return diary.id === id;
    });
}

总结

在本文中，我们介绍了如何基于JavaScript开发一款网页日记应用。我们学习到了如何使用HTML、CSS来构建网页，如何使用JavaScript实现网页的交互逻辑和功能，如何使用localStorage来存储数据。虽然这只是一个简单的网页应用，但这些技术在实际项目中都有很广泛的应用。

基于JavaScript开发网页日记应用

介绍

技术栈

功能需求

布局

添加日记界面:

日记列表界面:

实现步骤

1. 设计HTML结构和CSS样式

2. 编写JavaScript代码

2.1 添加新日记

2.2 删除日记

2.3 编辑日记

${newTitle}

${title}

2.4 查看日记

总结

相关阅读

前端开发标签

Js热门

Js更新