原生js实现留言板的增删以及留言的时间

awen阿文~

于 2023-11-26 16:13:37 发布

阅读量838

点赞数 17

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64229235/article/details/134628992

版权

在这个例子中，我们增加了以下功能：

输入框为空时进行提示
添加留言时间显示
添加留言删除功能
添加一些 CSS 样式

我们通过创建不同的元素，将留言元素拆分成了三个部分，分别是留言头、留言内容和删除按钮。其中，留言头中包含了用户的姓名和留言时间，删除按钮添加了点击事件，可将当前留言元素从留言列表中删除。

实现原理大致就是这样，样式什么的可以自己添加修改。

<!DOCTYPE html>
<html>
<head>
    <title>Guestbook Example</title>
</head>
<body>
    <h2>Guestbook</h2>
    <div>
        <input type="text" id="nameInput" placeholder="Your name">
        <textarea id="messageInput" placeholder="Your message"></textarea>
        <button onclick="addMessage()">Add Message</button>
    </div>
    <div id="messageList">
        <!-- 留言列表 -->
    </div>

    <script>
        // 获取留言输入框和留言列表元素
        var nameInput = document.getElementById("nameInput");
        var messageInput = document.getElementById("messageInput");
        var messageList = document.getElementById("messageList");

        // 添加留言到留言列表的函数
        function addMessage() {
            var name = nameInput.value;
            var message = messageInput.value;

            if (!name || !message) {
                alert("Please enter your name and message.");
                return;
            }

            // 创建留言元素
            var messageItem = document.createElement("div");
            messageItem.className = "message-item";

            var messageHeader = document.createElement("div");
            messageHeader.className = "message-header";
            messageHeader.innerHTML = "<strong>" + name + "</strong><span class='message-time'>" + new Date().toLocaleString() + "</span>";

            var messageContent = document.createElement("div");
            messageContent.className = "message-content";
            messageContent.innerText = message;

            var messageDelete = document.createElement("button");
            messageDelete.className = "message-delete";
            messageDelete.innerText = "Delete";
            messageDelete.addEventListener("click", function() {
                messageItem.remove();
            });

            messageItem.appendChild(messageHeader);
            messageItem.appendChild(messageContent);
            messageItem.appendChild(messageDelete);

            // 将留言元素添加到留言列表
            messageList.appendChild(messageItem);

            // 清空输入框
            nameInput.value = "";
            messageInput.value = "";
        }
    </script>

    <style>
        .message-item {
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 10px;
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .message-time {
            font-size: 12px;
            color: #666;
        }

        .message-content {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .message-delete {
            background-color: #fff;
            border: 1px solid #ccc;
            color: #333;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</body>
</html>

awen阿文~

关注

17
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
原生js实现留言板的增删以及留言的时间

我们通过创建不同的元素，将留言元素拆分成了三个部分，分别是留言头、留言内容和删除按钮。其中，留言头中包含了用户的姓名和留言时间，删除按钮添加了点击事件，可将当前留言元素从留言列表中删除。实现原理大致就是这样，样式什么的可以自己添加修改。添加一些 CSS 样式。输入框为空时进行提示。
复制链接

扫一扫