JavaScript用事件委托实现留言板功能

最新推荐文章于 2022-08-15 15:32:34 发布
最新推荐文章于 2022-08-15 15:32:34 发布
阅读量355 收藏 6
点赞数 3
分类专栏： JavaScript习题 文章标签： javascript css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55710075/article/details/122163404
版权

用事件委托实现留言板功能。
在这里插入图片描述
在这里插入图片描述

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100%;
            background: rgb(65, 65, 63);
        }

        .bacground {
            width: 700px;
            height: 100%;
            background: white;
            margin: auto;
            margin-top: 20px;
        }

        .head,
        .pop-head {
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .name {
            width: 640px;
            height: 40px;
            font-size: 20px;
            margin: 10px 28px;
            line-height: 50px;
            border-radius: 8px;
            border: 2px solid rgb(139, 137, 137);
            outline: none;
        }

        .content,
        .pop-reply {
            width: 640px;
            height: 150px;
            font-size: 22px;
            margin: 10px 28px;
            border: 2px solid rgb(139, 137, 137);
            outline: none;
            border-radius: 8px;
            resize: none;
        }

        .btn,
        .pop-btn {
            float: right;
            height: 30px;
            margin-right: 28px;
            border-radius: 6px;
            outline: none;
            font-size: 20px;
            padding: 0 20px;
            background: rgb(169, 238, 255);
        }

        h3 {
            font-size: 20px;
            color: rgb(102, 102, 102);
            background: rgb(205, 221, 248);
            margin-top: 50px;
            line-height: 50px;
            text-indent: 30px;
            font-weight: 545;
        }

        li {
            list-style: none;
            width: 640px;
            font-size: 22px;
            margin: 15px 30px;
        }

        .message-head {
            display: flex;
        }

        .message-head .photo {
            width: 70px;
            height: 70px;
            background: rgb(6, 109, 134);
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
            overflow: hidden;
        }

        .message-head .time {
            margin-left: 12px;
        }

        .liuyan,
        .reply p {
            width: 560px;
            /* height: 76px; */
            line-height: 50px;
            display: block;
            background: rgb(205, 221, 248);
            font-size: 20px;
            margin-left: 80px;
            border-radius: 8px;
            text-indent: 15px;
        }

        .delete {
            width: 60px;
            height: 30px;
            display: block;
            line-height: 30px;
            margin-left: 580px;
            /* margin-bottom: 0px; */
            border-radius: 6px;
            outline: none;
            font-size: 15px;
            background: rgb(169, 238, 255);
        }

        .answer {
            width: 60px;
            height: 30px;
            display: block;
            line-height: 30px;
            margin-top: -29px;
            margin-left: 515px;
            border-radius: 6px;
            outline: none;
            font-size: 15px;
            background: rgb(169, 238, 255);
        }

        .popup {
            width: 100vw;
            height: 100vh;
            position: fixed;
            background: rgba(0, 0, 0, .3);
            left: 0;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
        }

        .pop-content {
            width: 700px;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            padding-bottom: 20px;
        }

        .reply p {
            margin-top: 10px;
            background: rgba(100, 100, 100, .1);
        }
    </style>
</head>

<body>
    <div class="bacground">
        <div class="head">留言板</div>
        <input class="name" type="text" placeholder="请输入您的昵称">
        <textarea class="content" placeholder="请保持言论文明......"></textarea>
        <button class="btn">留言</button>
        <h3>大家在说</h3>
        <ul class="text">
            <!-- <li>
			<div class="message-head">
			<span class="photo">系统</span>
			<p class="time">2019-9-27 0:47:38</p>
			</div>
			<p class="liuyan">测试留言</p>
			<div class="reply">
			<p>测试回复</p>
			</div>
			<button class="delete">Delete</button>
			<button class="answer">Answer</button>
		</li> -->
        </ul>
    </div>

    <div class="popup">
        <div class="pop-content">
            <div class="pop-head">回复板</div>
            <textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
            <button class="pop-btn huiFu">回复</button>
            <button class="pop-btn quXiao">取消</button>
        </div>

    </div>
    <script>
        //在事件委托中，每一个if都相当于一个独立的函数，因为每一次点击都会重新触发事件处理函数

        var oAns ;

        //分析：事件委托给谁？ --- 共同的父元素
        document.onclick = function (e) {
            //事件处理对象，兼容IE8及以下版本的浏览器
            e = e || event ;
            // target目标  --- 具体是由哪个标签触发的
            var target = e.target ;


            //留言
            if(target.className === 'btn'){
                //获取对象
                var nickname = $('.name').value ;
                var content = $('.content').value ;

                //判断输入是否为空
                if(nickname && content){
                    //创建一个标签
                    var oLi = document.createElement('li') ;
                    //插入新内容
                    oLi.innerHTML = `
                    <div class="message-head">
                        <span class="photo">${nickname}</span>
                        <p class="time">2019-9-27 0:47:38</p>
                    </div>
                    <p class="liuyan">${content}</p>
                    <div class="reply">
                    </div>
                    <button class="delete">Delete</button>
                    <button class="answer">Answer</button>
                    `  
                    //将最新的留言插入到最上面
                    $('.text').insertBefore(oLi , $('.text').firstChild) ;

                    //倒计时
                    clock(target , 3) ;

                    //留言完后清空留言板内容
                    $('.content').value = '' ;

                }else{
                    alert('输入不能为空！')
                }

                return
            }

            //删除
            if(target.className === 'delete'){
                //删除留言
                target.parentNode.remove() ;
                return
            }

            //回复
            if(target.className === 'answer'){
                //显示弹窗
                $('.popup').style.display = 'flex' ;
                //找到回复留言的地方
                oAns = target.previousElementSibling.previousElementSibling ;
                return 

            }

            //确认回复
            if(target.className === 'pop-btn huiFu'){
                //拿到回复的内容
                var huiFuContent = $('.pop-reply').value ;
                if(huiFuContent){
                    //创建一个标签
                    var oP = document.createElement('p') ;
                    //将内容插入标签中
                    oP.innerHTML = huiFuContent ;
                    //将回复插入到留言的地方
                    oAns.appendChild(oP) ;
                }
                //关闭弹窗
                $('.popup').style.display = 'none' ;
                return
            }

            //取消回复
            if(target.className === 'pop-btn quXiao'){
                $('.popup').style.display = 'none' ;
                return
            }
            
        }

        //倒计时
        function clock(ele , time){
            if(!ele.disabled){
                ele.disabled = true ;
                ele.innerHTML = time + 's后可再次留言' ;
                var t = setInterval(function () {
                    time-- ;
                    ele.innerHTML = time + 's后可再次留言' ;
                    if(time <= 0){
                        clearInterval(t) ;
                        ele.disabled = false ;
                        ele.innerHTML = '留言' ;
                    }
                },1000)
            }
        }

        //获取对象
        function $(selector){
            return document.querySelector(selector) ;
        }
    </script>
</body>

</html>
小高今天早睡了吗？
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javaScript:使用js实现留言板效果（鼠标按下可以拖动）
Tian_R的博客
09-08 433
效果图： css： <style> * { margin: 0; padding: 0; } body { /* background: #ccc; */ font-size: 16px; } #box2 { width: 100%; height: 100%.
JavaScript留言板
LILI_JU88的博客
12-28 610
新建一个html文件 先写div将，做一个包裹住内容的容器，给它个类 再写个文本域textarea，与一个发送留言的按钮button 放个ul标签来放置留言信息，并给div包裹层的标签都给个id 给它们写样式 JavaScript：先获取包裹层内，文本域、按钮、无序列表里的li标签 然后就是按钮点击事件 设置一个函数，函数等于文本域的内容，还有楼层的自加 还有无内容函数，与判断 最后设置li标签内容 ...
JavaScript制作留言板
m0_48639378的博客
07-03 527
JavaScript制作留言板
JavaScript之留言板制作
weixin_44827643的博客
06-27 1429
本文主要介绍留言板的制作，用户可对新闻消息进行评论，发表之后评论会被置于顶端，点击相应删除按钮即可删除。本文主要介绍两种方式，区别在于如何实现评论的删除。1.在函数的局部作用域内完成删除事件的绑定，可以实现“点哪个删哪个评论”的效果。代码如下： 2.通过事件委托的方式，给评论模块的父级绑定事件，通过e.target属性的应用完成删除功能。代码如下：......
用Javascript实现留言板案例（附带删除留言）
茂茂的博客
02-01 2914
用Javascript实现留言板案例（附带删除留言） 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 在一些网站的讨论品论区，我们通常可以看见会有留言板这个功能，然后当用户评论时，空评论不能评论，发布的评论将会最新显示，把旧的评论抵下去，然后博主可以对评论进行删除 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
基于JavaScript实现留言板功能
10-15
以上就是基于JavaScript实现留言板功能的详细知识点，包括了前端界面布局和样式设计、用户交互的实现、DOM操作、事件处理，以及可能需要的后端数据存储和传输等方面的内容。通过这些知识点的应用，我们可以在网页上...
javascript实现留言板功能
10-15
在本文中，我们将探讨如何使用JavaScript实现一个简单的留言板功能。这个功能允许用户在网页上发表评论，并且可以删除已发布的评论。以下是如何实现这一功能的关键知识点： 1. **HTML结构**： 首先，我们需要创建...
JS实现简易留言板（节点操作）
10-15
本文将介绍如何使用JavaScript实现一个简易的留言板功能，主要涉及HTML、CSS和JavaScript的节点操作。首先，我们需要一个HTML结构来承载留言板的基本元素，包括一个文本区域供用户输入留言，一个发布按钮触发留言...
原生js 带增删动画版 留言板 评论板
10-24
本项目以原生JavaScript为核心，实现了具有动态增删功能的留言板和评论板，并且加入了优雅的动画效果，提升用户体验。以下将详细介绍该实现涉及的主要技术点和实现过程。 1. **DOM操作**： - **创建元素**：在添加...
C#，SolServe数据库（留言板）
12-04
在本项目中，我们关注的是一个使用C#编程语言开发的留言板应用，它与SolServe数据库集成，提供了用户友好的界面和高效的交互性。这个应用的核心功能是允许用户留下他们的信息，同时也支持对这些留言的管理和展示。...
javaScript简单的留言板
weixin_30381793的博客
05-10 278
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留言板</title> <style> *{margin: 0;padding: 0;list-...
留言板JavaScript实现
Pioneer
04-18 2907
html代码&lt;div id="main" class="main"&gt; &lt;ul id="content" class="content"&gt; &lt;li class="msgContent left"&gt;hello?&lt;/li&gt; &lt;div style=&qu
JavaScript实现简易留言板
dy799的博客
02-27 1225
留言板 需要实现的功能 Ⅰ，最新留言显示在最上边 Ⅱ，有删除功能 Ⅲ，点击留言后清空input内容 实现功能 Ⅰ，HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
JavaScript简单留言板
helongzhi的博客
06-26 146
JavaScript简单留言板
JavaScript简易留言板
Temptat14x的博客
08-15 369
用html+javascript实现简易留言板
留言板的javascript写法
zcm1457225624的博客
09-22 641
DOCTYPE html> html lang="en"> head>     meta charset="UTF-8">     title>Titletitle>     style>         *{margin:0;padding:0;}         div{width:500px;         height:auto!impor
javascript 信息留言板
m0_57163212的博客
06-02 357
JavaScript
JavaScript动态留言板设计
m0_56265442的博客
06-05 778
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> font{font-size: 2em; font-family: 黑体; } </style> </head> <body> <!--留言板动态展
使用JavaScript实现Web留言板功能
"这篇文档是关于使用JavaScript实现Web留言板功能的教程，提供了具体的代码实例。首先，通过HTML创建页面布局，包括标题栏、内容输入框、提交按钮和一个用于显示留言的区域。然后，利用JavaScript获取页面上的相关...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值