jquery添加div实现消息聊天框

最新推荐文章于 2020-07-19 09:54:18 发布
最新推荐文章于 2020-07-19 09:54:18 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： # jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreamzuora/article/details/80399519
版权

上代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

.border {
    margin-left: 300px;
    width: 900px;
    background-color: white;
    position: relative;
    border: 1px solid rgb(221, 221, 221);
}

.border .border-next {
    background-color: #dcad50;
    position: relative;
    height: 23px;
    line-height: 40px;
    display: flex;
    padding: 10px 60px 10px 80px;
}

.border-next .people {
    background-color: #dcad50;
    font-size: 20px;
    color: black;
    font-family: 楷体;
    margin-left: 300px;
}

.border .border-second {
    background-color: white;
    margin-left: 0px;
    width: 700px;
    height: 530px;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
}

.border .border-img {
    background-color: white;
    margin-left: 0px;
    width: 700px;
    height: 30px;
    border-right: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
}

.border-bottom {
    display: flex;
    width: 700px;
    height: 120px;
    background-color: white;
    overflow: auto;
    font-size: 20px;
    border-style: solid;
    border-color: #FFFFFF;
    border-right: 1px solid rgb(221, 221, 221);
}

.button {
    display: flex;
    margin-left: 530px;
}

.button .shut {
    background-color: white;
    width: 70px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    border: 1px solid rgb(221, 221, 221);
}

.button .send {
    background-color: white;
    margin-left: 15px;
    width: 70px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    border: 1px solid rgb(221, 221, 221);
    background-color: #DBAC50;
}

.replyChat {
    display:flex;
    width: 150px;
    background: #12B7F5;
    border-radius: 5px;
    /* 圆角 */
    position: relative;
    margin-left: 500px;
    align-content: center;
    margin-bottom: 30px;
}

.sendChat {
    display:flex;
    width: 150px;
    background: #E5E5E5;
    border-radius: 5px;
    /* 圆角 */
    position: relative;
    margin-left: 50px;
    align-content: center;
    margin-bottom: 30px;
    border-color: white white white #E5E5E5;
}

.sendChat span {
    display: inline-block;
    margin-left: 10px;
    line-height: 35px;
}

.replyChat span {
    display: inline-block;
    margin-left: 10px;
    line-height: 35px;
}

.sendChat .arrows {
    position: absolute;
    top: 5px;
    left: -16px;
    /* 圆角的位置需要细心调试哦 */
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 8px;
    border-color: white #E5E5E5 white white;
}

.replyChat .arrow {
    position: absolute;
    top: 5px;
    right: -16px;
    /* 圆角的位置需要细心调试哦 */
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 8px;
    border-color: white white white #12B7F5;
}

.chatTouXiang {
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(img/tou.png);
}
.chatCnt{

}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聊天助手</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    window.onload=function(){
        $(".arrow").hide();
        $(".arrows").hide();
    }
    document.onkeydown = function(e) {
        if (e.keyCode == 13 && e.ctrlKey) {
            // 这里实现换行
            document.getElementById("sendContent").value += "\n";
        } else if (e.keyCode == 13) {
            // 避免回车键换行
            e.preventDefault();
            // 下面写你的发送消息的代码
            f();
        }
    }
    function f() {
        var cnt = $("#sendContent").val();
        if(cnt == '')alert('内容不能为空');   
        if(cnt != ''){
            var node = document.createElement('div');
            node.className = 'sendChat';
            var span = document.createElement('span');
            span.innerHTML = cnt;
            var arrow = document.createElement('div');
            arrow.className = 'arrows';
            node.appendChild(span);
            node.appendChild(arrow);
            $(".border-second").append($(node));
            $("#sendContent").val('');
            $.ajax({
                data : cnt,
                type : "post",
                url : "CharServlet?id=" + cnt,
                dataType : "json",
                success : function(msg) {
                    var node = document.createElement('div');
                    node.className = 'replyChat';
                    var span = document.createElement('span');
                    span.innerHTML = msg.text;
                    var arrow = document.createElement('div');
                    arrow.className = 'arrow';
                    node.appendChild(arrow);
                    node.appendChild(span);

                    $(".border-second").append($(node));

                    var boderSecondDiv = $('.border-second');
                    var lastChild = boderSecondDiv[0].lastChild;
                    var lastChildH = lastChild.offsetTop;
                    var h = 0;
                    for (var i = 0, len = lastChild.children.length; i < len; i++) {

                        h += lastChild.children[i].offsetHeight;
                    }
                    boderSecondDiv[0].scrollTop = lastChildH + h;

                },
                error : function(msg) {
                    alert("请求失败");
                }
            });
        }
    }
</script>
</head>

<div class="frame">
    <div class="border">
        <div class="border-next">
            <div class="people">聊天助手</div>
        </div>
        <div class="border-second">
            <div class="chatCnt">
            <div class="chatTouXiang"></div>  
            <div class="sendChat">
                <span></span>
                <div class="arrows"></div>
            </div>
            </div>
            <div class="replyChat">
                <span></span>
                <div class="arrow"></div>
            </div>
            <br>
        </div>
        <div class="border-img"></div>
        <textarea id="sendContent" class="border-bottom"></textarea>
        <div class="button">
            <button class="shut">关闭</button>
            <button id="selectBtn" class="send" onclick="f()">发送</button>
        </div>

    </div>
</div>
</body>
</html>

这里写图片描述

成长的小牛233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
强大的响应式jQuery消息通知框和信息提示框插件
sunny_girls的专栏
06-02 1万+
lobibox是一款功能非常强大的jQuery消息通知框和信息提示框插件。这个插件分为两个部分：消息通知框和信息提示框。它能非常好的结合Bootstrap使用。 信息提示框 lobibox的信息提示框可以是模态窗口，也可以不是模态窗口。允许显示多条信息。允许使用任何可用的CSS动画来显示和隐藏信息提示框。信息提示框可以显示不同的颜色和图标。可以设置为确认信息提示框。可以设置为一行的pr
jQuery实现聊天对话框
11-20
本文实例为大家分享了jQuery实现聊天对话框的具体代码，供大家参考，具体内容如下 效果图：左下角选择对话的角色，在对话框输入消息点击发送按钮，消息显示在上面界面当中，然后对话框内容被清空。 <!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
jquery+css实现自定义对话框功能（不使用插件）
热门推荐
CSU_Zipple的博客
04-21 2万+
当今网络上各种jquery对话框插件层出不穷，可是我为什么要放弃这些插件选择自己使用jquery和css来自定义对话框的呢？有两方面的原因，一个是有利于自己更加深入的了解css和jquery的特性，另一方面也可以更加的兼容自己的项目。这里面有几个关键性的技术点，但是我们先不着急讲解这些，各位先看看下面的效果吧，再来决定是否看下去。在后面我会给出自己在实现这两种对话框时遇到的问题，以及解决它们的办法
9个疯狂的jQuery聊天和聊天框插件
11-02 806
谁希望有一个聊天框集成在他们的网站像我们看到在Facebook和Gmail吗？ 如果你拥有自己的网站，你需要这种类型的功能，那么你是在正确的地方;）在这篇文章中，我们已经收集了9个jQuery的聊天室和聊天框插件 ，你会发现有用的，强大的，准备和易于 - 使用jQuery的供电聊天！ 请享用。 1. jQuery UI的客舱插件 这是一个纯粹的UI插件，因此您可以轻松地将其插入到你所选择的任...
jQuery编写QQ简易聊天框
10-14
在这个实例中，我们将学习如何利用jQuery实现一个基本的聊天功能，包括输入文本、发送消息以及显示聊天记录。 首先，我们看到HTML结构，它包含一个`<section>`元素作为聊天区域，其中有一个`<div class="chatBody">...
jQuery实现简易聊天框
10-15
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的聊天框功能。这个聊天框的设计旨在提供基本的聊天体验，允许用户输入文字并将其发送到聊天窗口。以下是对标题和描述中涉及的知识点的详细说明： 1. **...
jQuery实现简单QQ聊天框
10-14
文章标题“jQuery实现简单QQ聊天框”所涉及的知识点涵盖了使用jQuery库制作一个具有基础功能的网页版模拟聊天界面。具体知识点可以分为以下几个部分： 1. HTML结构设计：文章的HTML部分定义了聊天框的基本结构，...
一款简单的Jquery聊天窗口
06-19
简单的前端聊天窗口，使用jquery库，引用jquery.sinaEmotion.js表情包
Jquery精美聊天窗口
08-24
html+Jquery 精美的聊天窗口，非常美观，棒棒棒棒棒棒
jQuery实现消息提示框
04-15
NULL 博文链接：https://johnny-lee.iteye.com/blog/1768559
jQuery弹出消息提示框
07-10
弹出消息提示框 弹出消息提示框弹出消息提示框 弹出消息提示框 弹出消息提示框
jquery消息提示窗口
10-29
能兼容 IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.等各种浏览器！代码调用简单 通用性好
jquery-ui 对话框_jQuery UI对话框插件
从零开始的教程世界
07-19 374
jquery-ui 对话框We will discuss about the jQuery UI Dialog plugin in this post. The jQuery UI Dialog plugin is used for displaying information, which contains a dialog title and a content area. We can mo...
jQuery消息提示框插件Tipso
natalie86的专栏
03-13 632
之前我们分享过很多漂亮的Tooltip提示框插件，比如这款带Tooltip表单验证的注册表单。今天要分享的这款jQuery消息提示框插件名叫Tipso，它的特点是可以定义提示框的显示位置，以及动态改变提示框的提示内容，应该说是一款相当灵活的jQuery消息提示框插件。 在线演示 jQuery消息提示框插件Tipso.rar
jQuery easyUI--消息框的使用
学亮编程手记
02-23 476
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;消息框的使用&lt;/title&gt; &lt;script type="text/javascript" src=".
聊天对话界面html jquery代码
最新发布
08-06
### 回答1： 好的，以下是一个简单的聊天对话界面的HTML和jQuery代码： HTML代码： ```html <div id="chatbox"> <ul id="conversation"></ul> <input type="text" id="message" placeholder="Type message here..." /> <button id="send">Send</button> </div> ``` jQuery代码： ```javascript $(function() { var socket = io.connect(); // 连接socket.io服务器 // 当接收到新消息时，添加到对话框中 socket.on('new message', function(data) { $('#conversation').append('<li>' + data.username + ': ' + data.message + '</li>'); }); // 当点击发送按钮或按下回车键时，发送消息 $('#send').click(function() { sendMessage(); }); $('#message').keypress(function(event) { if (event.keyCode == 13) { sendMessage(); } }); // 发送消息到服务器 function sendMessage() { var message = $('#message').val(); if (message != '') { socket.emit('send message', { message: message }); $('#message').val(''); } } }); ``` 说明： 1. HTML代码包含一个`<ul>`元素用于显示对话信息，一个`<input>`元素用于输入消息，和一个`<button>`元素用于发送消息。 2. jQuery代码使用socket.io库连接到服务器，当接收到新消息时，将其添加到对话框中。 3. 当用户点击发送按钮或按下回车键时，会调用`sendMessage()`函数，该函数将消息发送到服务器并清空输入框。 需要注意的是，以上代码仅提供了一个简单的聊天对话框的实现。如果您需要更复杂的功能或界面，可能需要进行更多的开发和定制。 ### 回答2： 聊天对话界面是一个常见的Web页面设计需求，用HTML和jQuery可以很方便地实现。 首先，我们需要一个HTML布局来展示聊天对话。可以使用无序列表（<ul>）来显示每条消息，每条消息使用一个列表项（<li>）进行包裹。列表项的内容可以是一个<div>，用来展示具体的消息内容。为了方便样式的管理，可以给每个<div>添加自定义类名，比如"class='message'"。 接下来，需要借助jQuery来实现发送和接收消息的功能。我们可以通过点击发送按钮来触发发送消息的操作。在jQuery中，可以使用事件监听函数（event listener）来监听按钮的点击事件，比如使用".click()"函数。然后，在事件处理函数中，获取输入框中的文本内容，然后将其添加到聊天对话的HTML结构中，可以使用jQuery的".append()"方法。同时，为了保证良好的用户体验，还可以使用滚动条让聊天对话自动滚动到最新的消息处，可以使用jQuery的".scrollTop()"方法。 接收消息的过程可以模拟一个定时器，每隔一段时间发送一个虚拟的消息。可以使用jQuery的".setInterval()"函数来实现定时器的功能。在定时器的回调函数中，可以使用相同的方法将接收到的消息添加到聊天对话中。 最后，可以使用CSS样式表来美化聊天对话界面，包括设置背景颜色、字体颜色、边框样式等。 综上所述，通过HTML和jQuery的结合，可以实现一个简单的聊天对话界面，其中HTML负责页面的结构布局，而jQuery负责实现发送和接收消息的功能。 ### 回答3： 聊天对话界面的HTML和jQuery代码如下： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>聊天对话界面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="chat-container"> <div id="chat-messages"></div> <div id="chat-input"> <input type="text" id="message-input" placeholder="请输入消息..."> <button id="send-button">发送</button> </div> </div> <script src="jquery.js"></script> <script src="script.js"></script> </body> </html> ``` 在上面的HTML代码中，我们创建了一个包含聊天消息和输入框的聊天对话界面。 CSS代码（style.css）用来美化聊天界面的样式，这里省略不写。 jQuery代码（script.js）： ```javascript $(document).ready(function() { // 发送按钮点击事件 $('#send-button').click(function() { sendMessage(); }); // 输入框回车事件 $('#message-input').keypress(function(e) { if (e.which == 13) { sendMessage(); } }); // 发送消息的函数 function sendMessage() { var message = $('#message-input').val(); // 获取输入框中的消息 if (message.trim() != '') { var newMessage = $('<div class="message"></div>').text(message); // 创建一个新的消息元素 $('#chat-messages').append(newMessage); // 将新的消息元素添加到聊天消息容器中 $('#message-input').val(''); // 清空输入框 $('#chat-messages').scrollTop($('#chat-messages')[0].scrollHeight); // 滚动到最新的消息 } } }); ``` 以上的jQuery代码使用了`$(document).ready()`函数，确保在整个页面加载完成后执行代码。然后将发送按钮和输入框添加了点击事件和回车事件监听器，并定义了一个函数来处理发送消息的逻辑。 在发送消息的函数中，首先获取输入框中的消息内容，判断是否为空。如果不为空，则创建一个新的消息元素，并将其添加到聊天消息容器中。接着清空输入框中的内容，并将聊天消息容器滚动到最新的消息位置，保持最新消息的可见性。 以上便是聊天对话界面的HTML和jQuery代码的解答，希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值