jQuery实现网页聊天窗口对话

最新推荐文章于 2024-09-09 09:51:14 发布

LINGK98

最新推荐文章于 2024-09-09 09:51:14 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： jquery javascript css3 html

本文链接：https://blog.csdn.net/LINGK98/article/details/114142601

版权

前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

效果

html

<!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 src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" href="chat.css">
</head>

<body>
  <div class="contain">
    <div class="top">
      <div class="top-box">
        
        <!-- <div class="chat-lst-1">
          <div class="img">
            <img src="2.jpg" alt="">
          </div>
          <div class="chat-content-1">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
        </div>
        <div class="chat-lst-2">
          <div class="chat-content-2">111111111111111111111111111111111111111111111111111111</div>
          <div class="img">
            <img src="1.jpg" alt="">
          </div>
        </div>
        <div class="chat-lst-1">
          <div class="img">
            <img src="2.jpg" alt="">
          </div>
          <div class="chat-content-1">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
        </div>
        <div class="chat-lst-2">
          <div class="chat-content-2">你好</div>
          <div class="img">
            <img src="1.jpg" alt="">
          </div>
        </div> -->

      </div>
    </div>
    <div class="bottom">
      <div class="input">
        <textarea name="send_content" id="send_content" cols="80" rows="9"></textarea>
      </div>
      <div class="send">
        <button onclick="send()">发送</button>
      </div>
    </div>
  </div>

  <script src="js/chat.js"></script>
</body>

</html>

css

.contain{
    width: 800px;
    height: 500px;
    border: 1px solid #7a7a7a;
    position: relative;
}
.top{
    height: 70%;
    display: flex;
    flex-direction: column;
}
.top-box{
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
}

.chat-lst-1{
    min-width: 400px;
    display: flex;
    padding: 20px;
}
.chat-lst-1 img{
    width: 40px;
    border-radius: 50%;
}
.chat-content-1{
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    padding: 10px 20px;
    background-color: rgb(4, 255, 45);
}

.chat-lst-2{
    min-width: 400px;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    margin-left: auto;
}
.chat-lst-2 img{
    width: 40px;
    border-radius: 50%;
}
.chat-content-2{
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    padding: 10px 20px;
    background-color: rgb(46, 208, 236);
    word-break: break-word;
}
.bottom{
    height: 30%;
    border-top: 1px solid #7a7a7a;
}
.input textarea{
    width: 99%;
    margin: auto;
    resize: none;
    border: 0;
}
.input textarea:focus{
    outline: none;
}
.send{
    position: absolute;
    right: 20px;
    bottom: 20px;
}

jacascript


let data = [
    {
        status: 1,
        userId: '1',
        img: '2.jpg',
        time: '2021-2-26 15:00',
        content: '你好'
    }
]

// 初始化页面
function init(data) {
    let chat_html = ''
    for (let i = 0; i < data.length; i++) {
        if (data[i].status == 1) {
            chat_html = `
                <div class="chat-lst-1">
                    <div class="img">
                        <img src="` + data[i].img + `" alt="">
                    </div>
                    <div class="chat-content-1">` + data[i].content +`</div>
                </div>
            `
        }else{
            chat_html = `
                <div class="chat-lst-2">
                    <div class="chat-content-2">` + data[i].content +`</div>
                    <div class="img">
                        <img src="` + data[i].img + `" alt="">
                    </div>
                </div>
            `
        }
        $('.top-box').append(chat_html)
    }
    $('.top-box').scrollTop($('.top-box').height())
}

// 发送信息
function send() {
    // console.log()
    data.push({
        status: 2,
        userId: '2',
        img: '1.jpg',
        time: 'XXXX-XX-XX XX:xx',
        content: $('#send_content').val()
    })
    render_page({
        status: 2,
        userId: '2',
        img: '1.jpg',
        time: 'XXXX-XX-XX XX:xx',
        content: $('#send_content').val()
    })
    $('#send_content').val('')
}
// 发送后再次渲染页面
function render_page(data) {
    let chat_html = `
            <div class="chat-lst-2">
                <div class="chat-content-2">` + data.content +`</div>
                <div class="img">
                    <img src="` + data.img + `" alt="">
                </div>
            </div>
        `
    $('.top-box').append(chat_html)
    $('.top-box').scrollTop($('.top-box')[0].scrollHeight + $('.top-box')[0].scrollTop)
    
    setTimeout(() => {
        get()
    }, 1000);
}

// 模拟接受信息
function get() {
    let text = ['抱歉,我不大清楚你的问题!' , '你可以再详细描述你的问题吗?']
    let data = {
        status: 1,
        userId: '1',
        img: '2.jpg',
        time: 'XXXX-XX-XX XX:xx',
        content: text[Math.floor(Math.random() * 2)]
    }
    let chat_html = `
        <div class="chat-lst-1">
            <div class="img">
                <img src="` + data.img + `" alt="">
            </div>
            <div class="chat-content-1">` + data.content +`</div>
        </div>
    `
    $('.top-box').append(chat_html)
    $('.top-box').scrollTop($('.top-box')[0].scrollHeight + $('.top-box')[0].scrollTop)
}

init(data)

document.onkeydown = function(ev){
    var event = ev || event
    if(event.keyCode==13){
        send()
    }
}