Js实现留言板功能

最新推荐文章于 2023-08-29 17:29:08 发布
最新推荐文章于 2023-08-29 17:29:08 发布
阅读量1.7k 收藏 8
点赞数
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzsan_/article/details/123876870
版权

在文本框中输入想要留言的内容，点击留言按钮实现留言，点击删除实现删除 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oTxt=document.getElementById('txt');
            var oBtn=document.querySelectorAll('input')[1];
            var oUl=document.getElementById('ul');
            oBtn.onclick=function(){
                var str=oTxt.value;
                var oLi=document.createElement("li");
                oLi.innerHTML=str;
                var oBtn2=document.createElement("button");
                console.log(oBtn2)
                oBtn2.style.border='none';
                oBtn2.innerHTML='删除';
                // 把button追加到li中
                oLi.appendChild(oBtn2);
                // 点击事件
                oBtn2.onclick=function(){
                    //删除此button的父节点
                    oUl.removeChild(this.parentNode);
                }
                // ul里是否存在第一个元素节点
                if(oUl.children[0]){
                    // 在第一个节点前插入
                    oUl.insertBefore(oLi,oUl.children[0]);
                }else{
                    oUl.appendChild(oLi);
                }
                oTxt.value=null;//清空文本框
            }
        }
      
    </script>
</head>
<body>
    <input type="text" id="txt">
    <input type="button" value="留言">
    <ul id="ul"></ul>
</body>
</html>

 

lzsan_
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现留言板
xuehaocyuyan的博客
07-02 2636
具体的实现看以下代码，代码包含详细注释。效果图如下 输入内容为空 发布： 删除： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
JavaScript网页特效-留言板
weixin_43396749的博客
11-25 1258
JavaScript网页特效-留言板
JS实现简易留言板（节点操作）
11-21
本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下 今天的案例主要是对节点进行操作 创建节点、添加节点、删除节点以及为节点添加内容的操作。  就是一个简单的留言板功能，可以发布留言，删除留言。 主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件 发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元素的内容是使用表单的特有属性value，要与普通元素获取内容的innerHTML进行区分；再把删除链接添加到li中，利用字符串拼接的方式。最后把li节点添加到ul中，添加的方式有两种，是直
JS——利用JS实现简易留言板
Bonsoir777的博客
08-26 9326
本文主要阐述如何利用js实现简易留言板的实现过程
使用js实现留言板效果
最新发布
xiaocantongxue的博客
08-29 573
【代码】使用js实现留言板效果。
JS实现简易留言板增删功能
10-15
主要为大家详细介绍了JS实现简易留言板增删功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现留言板功能
10-15
以上就是使用JavaScript实现留言板功能的核心知识点。这个简单的例子展示了如何使用JavaScript动态操作DOM、处理用户输入、添加和删除元素，以及使用CSS进行页面样式设计。这为构建更复杂的交互式Web应用奠定了基础...
JS实现留言板功能
10-19
主要为大家详细介绍了JS实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于JavaScript实现留言板功能
10-15
主要为大家详细介绍了基于JavaScript实现留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现留言板功能
10-15
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的留言板功能。首先，我们要了解留言板的基本组成部分：用户输入框、提交按钮以及显示留言的地方。在给出的代码中，这些元素都已通过HTML定义： ```...
JavaScript实现留言板案例
10-15
主要为大家详细介绍了JavaScript实现留言板案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用js做简易留言板
yuyangll的博客
05-19 1169
前段时间学习了JavaScript，学的网课视频老师利用js做了简易的留言板 最近趁空闲时间自己也敲了一边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
用javascript实现留言板
yangaoyuan1999的博客
11-06 7598
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; ...
用js写留言板
ASLlife的博客
04-15 2590
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0px; padding: 0px; font...
js节点操作实现留言板的功能
m4587的博客
08-25 362
节点操作实现留言板的功能，文本框输入内容点击按钮提交在页面下面显示信息并将文本域输入的内容清空 点击信息删除这条信息 如果输入的内容为空，则点击提交按钮页面下不显示信息
js实现留言板的功能
FLJ1027的博客
12-16 822
简单的功能，涉及到拖拽，鼠标按住弹出框标题，实现拖拽到任意位置，关闭弹出框，再次点击添加，弹出框位置不变。 <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; user-select: none; ...
原生js实现留言板
weixin_42380671的博客
03-07 434
直接上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言</title> <style> .head{ width: 90%; ...
Ajax — 评论列表
黑白两客
04-12 379
<body style="padding: 15px;"> <!-- 评论面板 --> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">发表评论</h3> </...
html5实现留言功能,基于JavaScript实现留言板功能
06-06
好的，我可以为您提供一些思路和代码示例。 首先，我们可以在HTML中创建一个表单，用于用户输入留言内容和提交留言： ```html <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <label for="message">留言：</label> <textarea id="message" name="message"></textarea><br> <button type="submit" onclick="addComment()">提交</button> </form> ``` 然后，我们可以使用JavaScript来处理表单的提交事件，并将留言内容添加到留言板中： ```javascript const comments = []; // 用于存储留言的数组 function addComment() { const name = document.getElementById("name").value; const message = document.getElementById("message").value; const comment = { name, message }; comments.push(comment); renderComments(); } function renderComments() { const container = document.getElementById("comments"); container.innerHTML = ""; // 清空留言板 comments.forEach(comment => { const div = document.createElement("div"); const name = document.createElement("h5"); const message = document.createElement("p"); name.innerText = comment.name; message.innerText = comment.message; div.appendChild(name); div.appendChild(message); container.appendChild(div); }); } ``` 最后，我们需要在HTML中创建一个容器，用于显示留言板： ```html <div id="comments"></div> ``` 完整的代码示例： ```html <!DOCTYPE html> <html> <head> <title>留言板</title> </head> <body> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <label for="message">留言：</label> <textarea id="message" name="message"></textarea><br> <button type="submit" onclick="addComment()">提交</button> </form> <div id="comments"></div> <script> const comments = []; // 用于存储留言的数组 function addComment() { const name = document.getElementById("name").value; const message = document.getElementById("message").value; const comment = { name, message }; comments.push(comment); renderComments(); } function renderComments() { const container = document.getElementById("comments"); container.innerHTML = ""; // 清空留言板 comments.forEach(comment => { const div = document.createElement("div"); const name = document.createElement("h5"); const message = document.createElement("p"); name.innerText = comment.name; message.innerText = comment.message; div.appendChild(name); div.appendChild(message); container.appendChild(div); }); } </script> </body> </html> ``` 这样，用户就可以在网页上输入留言并提交，留言板会自动更新显示最新的留言。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值