基于JavaScript开发网页日记应用

撸码网

2023-12-07 23:40:07

0次

介绍

现代人们生活节奏加快，很多人没时间手写纸质日记了，有不少人选择使用网页日记应用来记录自己的生活点滴。今天我们将介绍如何基于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开发音频播放器

下一篇：基于JavaScript开发网页倒计时应用

相关阅读

前端开发标签

Js热门

Js更新

免责申明：本站所有文章、数据仅供参考，广告商的言论与行为均与猿码集无关！谨防受骗！ 侵权及不实信息举报邮箱至：amarlboro@yeah.net 渝ICP备2023009929号-1