利用节点操作完成简易的留言板功能

已于 2022-04-28 15:52:57 修改
阅读量504 收藏 3
点赞数 7
分类专栏： JavaScript 零基础入门 文章标签： css3 css 前端 javascript 开发语言
于 2022-02-24 18:40:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52212950/article/details/123118118
版权

效果如下：

（真可爱啊）

实现原理：

每点击一次提交按钮，就创建一个 li 标签（本身 ul 里没有 li 标签，ul 在 textarea 下方）然后使用 innerHTML 将textarea 的 value 值传给 li 标签的内容。删除用到了 removeChild

JS 实现代码：

 <script>
        var btn=document.querySelector('button');
        var text=document.querySelector('textarea');
        var ul=document.querySelector('ul');
        btn.onclick=function(){
            if(text.value==''){
                alert('不能提交空留言');
            }else{
            var lis=document.createElement('li');
            lis.innerHTML=text.value + "<button class='del'>删 除</button>";
            ul.insertBefore(lis,ul.children[0]);
            text.value='';
           //删除留言
           var del=document.querySelectorAll('.del');
           for(var i=0;i<del.length;i++){
                del[i].onclick=function(){
                    ul.removeChild(this.parentNode);
                }
              }
            }
        }
    </script>

完整代码：

  <style>
        .box{
            box-sizing: border-box;
            width: 500px;
            height: 1200px;
            margin: 100px auto;
        }

        textarea{
            box-sizing: border-box;
            padding: 10px;
           width: 600px;
           height: 145px;
           background-color: rgb(236, 235, 235);
           font-size: 20px;
           outline: none;
           border: 2px solid;
           -webkit-border-radius:30px;
            -moz-border-radius:30px;
        }

        .sub{
            position: absolute;
            left: 965px;
            top: 257px;
            width: 100px;
            height: 50px;
             background-color: rgb(253, 236, 78); 
             font-weight: bold;
            /* border: 1px solid; */
            font-size: 22px; 
            -webkit-border-radius:30px;
            -moz-border-radius:30px;
        }

        .sub:hover{
            background-color: rgb(248, 100, 100);
            color: rgb(255, 255, 255);
        }

        ul{
            position: absolute;
            left: 435px;
            top: 241px;
            width: 460px;
            height: 10px;
        }

        li{
            padding-left: 10px;
            line-height: 50px;
            -webkit-border-radius:30px;
            -moz-border-radius:30px;
          width: 460px;
          height: 50px;
          background-color: rgb(121, 190, 255);
          border-bottom: 2px solid;
          margin-bottom: 10px;
        }

        .del{
           margin-top: 13px;
           margin-right: 10px;
            float: right;
            width: 60px;
            height: 25px;
            -webkit-border-radius:30px;
            -moz-border-radius:30px;
            background-color: rgb(248, 100, 100);
            color: rgb(255, 255, 255);
            border: 1px solid;
            border-color: black;
            font-weight: bold;
        }

         .del:hover{
             background-color: rgb(209, 29, 29);
         }
    </style>
</head>
<body>
    <div class="box">
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入留言"></textarea>
        <br>
        <button class="sub">提 交</button>
        <ul>
        </ul>
    </div>
    <script>
        var btn=document.querySelector('button');
        var text=document.querySelector('textarea');
        var ul=document.querySelector('ul');
        btn.onclick=function(){
            if(text.value==''){
                alert('不能提交空留言');
            }else{
            var lis=document.createElement('li');
            lis.innerHTML=text.value + "<button class='del'>删 除</button>";
            ul.insertBefore(lis,ul.children[0]);
            text.value='';
           //删除留言
           var del=document.querySelectorAll('.del');
           for(var i=0;i<del.length;i++){
                del[i].onclick=function(){
                    ul.removeChild(this.parentNode);
                }
              }
            }
        }
    </script>
</body>

卡卡西最近怎么样
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
html简单留言板教程,JS实现简易留言板（节点操作）
weixin_39624769的博客
06-05 4752
本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下今天的案例主要是对节点进行操作创建节点、添加节点、删除节点以及为节点添加内容的操作。就是一个简单的留言板功能，可以发布留言，删除留言。主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元...
JS（javascript）节点操作案例：利用节点操作的创建、删除、添加；制作简易的留言板
Cone0212的博客
04-22 1076
在指定位置输入内容，点击按钮自动创建一个节点生成自己所输入的内容，并且可以选择性删除 效果图展示 css部分 <style> textarea { width: 250px; height: 150px; border: 1px solid indianred; bor...
编写js通过节点操作实现简易留言板功能
girls的博客
12-23 425
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { padding: 100px; } text.
JavaScript-添加删除节点-留言板案例
廖若星辰-LTY
06-02 724
分享一个JavaScript的留言板添加留言、删除留言的小案例，内附详细代码分析、但不涉及数据库操作，只解析底层代码实现思路： 实现效果
简单留言板案例(html-JavaScript节点操作-留言增加删除createElement-removeChild)
zinc1234596的博客
02-17 984
留言板案例 <textarea name="" id="" cols="30" rows="10">123</textarea> <button>发布</button> <ul> </ul> <script> // 1.获取元素 var btn = document.querySelector('button') var text = docum
JavaScript 案例 留言板
weixin_65257540的博客
03-18 1118
思路 1、设置点击事件。点击留言按钮获取本地储存并转为数组。 2、判断本地储存是否有值，如果有获取最后一个元素的id，如没有就把他赋值为一个新数组，把id值赋为1. 3、在判断文本框是否有值，有值才能操作。 4、调用时间函数，得到当前时间，当前用户名，以及当前内容以对象的方式存入数组。 5、调用渲染函数，每次调用都把留言框的值为空，让他重新获取重新渲染。 6、获取本地储存的数据数组，遍历每一个元素，就创建一个节点，赋值并添加进如节点。 7、为了删除操作，需要给每个删除按钮一个自定义属性。 8
【JavaScript】DOM节点操作
南栀的博客
06-10 436
节点DOMDOM分层节点访问指定节点遍历文档树 DOM 一个网页就是一个节点树，页面中的所有内容都是节点。 DOM=Document Object Model文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有Document，DOM也就无从谈起。 Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称
Python 爬取留言板留言（一）：单进程版+selenium模拟
热门推荐
CUFEECR的博客
02-29 1万+
Python用于爬虫，可以爬取网上的大量数据。本篇详细讲解了利用Python selenium模拟操作浏览器抓取领导留言板的数据，单进程实现，同时需要提前手动获取fid，同时利用多个函数来分别实现具体功能，达到了低耦合的编程规范，也认识到了一些不足，在后期进行改进。
Python 爬取留言板留言（二）：多线程版+selenium模拟
CUFEECR的博客
02-28 6450
Python用于爬虫，可以爬取网上的大量数据。本篇详细讲解了利用Python selenium模拟操作浏览器抓取领导留言板的数据，多线程实现，用3种方法控制线程数量达到提高爬取小频率的目的，同时强化了异常捕获和处理，增加代码的健壮性，与第一版相比有了较多的改进。同时需要提前手动获取fid，同时利用多个函数来分别实现具体功能，达到了低耦合的编程规范，也认识到了一些不足，在后期进行改进。
xml课程设计---xml留言板
06-11
4. 留言板功能实现： - 添加留言：用户填写信息后，JSP处理请求并将数据写入XML文件，可能涉及到DOM（Document Object Model）或SAX（Simple API for XML）解析器。 - 回复留言：在原有XML文件中找到相应留言并...
ASP源码—xml 留言本 v1.0.zip
10-20
例如，读取XML文件、获取某个留言节点、更新留言内容等操作，都可以通过DOM API完成。 ASP—XML留言本的实现流程可能包括以下几个步骤： 1. 用户在前端页面填写留言信息，提交表单。 2. ASP脚本接收到表单数据，...
php开发培训最全学习大纲.docx
12-25
3. DOM方法详解：掌握DOM提供的各种节点操作方法。 4. BOM（Browser Object Model）相关对象：如window、document、navigator等对象的使用。 5. BOM兼容性问题：处理不同浏览器下BOM对象的差异。 十三、正则表达式 ...
CSS3 scale 适配
m0_54007573的博客
07-24 684
CSS3 scale 适配
web基础之CSS
Yunzhong_jiuxiao的博客
08-02 834
css属性
JS+CSS案例：JS+CSS 实现漂亮时尚的样式表切换（换肤）功能
最新发布
uu0216的博客
08-02 346
在页面前端给用户提供网站换肤的选择，并利用cookie记录用户访问网站时候选择的网站风格（样式表文件）。
CSS 的工作原理
07-25 1270
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡卡西最近怎么样

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值