jQuery实现简单QQ聊天框

本文实例为大家分享了jQuery实现简单QQ聊天框的具体代码，供大家参考，具体内容如下

先放一张效果图！

1.首先我们把基本框架搭出来，还要准备三张图片用来当作头像，下面是html的内容

<body>
<section id="chat">
  <div class="chatBody"></div>
  <div>
    <img src="images/icon.jpg">
  </div>
  <textarea class="chatText"></textarea>
  <div class="btn">
    <span>关闭(C)</span>
    <span id="send">发送(S)</span>
  </div>
</section>
</body>

2.头部引入jQuery，我用的版本是3.5.1的

<script src="js/jquery-3.5.1.js"></script>

3.先写一个事件加载函数，网页加载完成后执行此函数

$(funtion () {

})

4.分别用一个数组来保存头像图片的路径和网友昵称

$(funtion () {
 let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg'];
  let name = ['chen', 'liu', 'feng'];
})

5.给发送按钮添加一个点击事件，核心在这里

$(function () {
      let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg'];
      let name = ['chen', 'liu', 'feng'];
      $('#send').click(function () {
        let num = Math.floor((Math.random()*3)); // 随机获取一个0到2的整数，用作数组下标，从而使头像和昵称随机显示
        let text = $('.chatText').val();     // 获取输入框的文本内容，并赋值给text
        if (text.length > 0) {          // 文本内容的长度大于0就执行里面的函数
          $('.chatBody').append(        // 在div里面追加内容
            `<div class="item">
              <img src="${pic[num]}" alt="头像"> // 显示头像
              <span>${name[num]}</span>     // 显示昵称
              <div>${text}</div>        // 显示文本内容
             </div>`
          );
        }
        $('.chatText').val(''); // 获取完输入框的内容后清空输入框
      })
 })

css样式就看自己喜好调啦！

他的实现逻辑很简单，点击事件获取输入框内容，然后用append()方法将模板字符串追加到容器里面，最后清空输入框，头像和昵称用随机数生成配合数组就可以搞定！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现简易聊天框

    jQuery实现简易聊天框

    本文实例为大家分享了jQuery实现简易聊天框的具体代码,供大家参考,具体内容如下 效果: CSS代码: body{ margin: 0; } .kuan{ height:550px; width: 650px; background-color: #ccc; margin: 80px auto; } .header{ width: 100%; height: 35px; background-color: #00f; } .chatBody{ width: 100%; height: 70%;

  • jquery添加div实现消息聊天框

    jquery添加div实现消息聊天框

    本文实例为大家分享了jquery添加div实现消息聊天框的具体代码,供大家参考,具体内容如下 上代码 <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); } .borde

  • jQuery实现简易QQ聊天框

    jQuery实现简易QQ聊天框

    本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>例子1</title> <style type="text/css"> *{list-style: none;margin: 0;padd

  • jQuery编写QQ简易聊天框

    本文实例为大家分享了jQuery编写QQ简易聊天框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ简易聊天框</title> <link rel="stylesheet" href="css/chat.css" >

  • jQuery实现简单QQ聊天框

    本文实例为大家分享了jQuery实现简单QQ聊天框的具体代码,供大家参考,具体内容如下 先放一张效果图! 1.首先我们把基本框架搭出来,还要准备三张图片用来当作头像,下面是html的内容 <body> <section id="chat"> <div class="chatBody"></div> <div> <img src="images/icon.jpg"> </

  • 使用jQuery实现简单的tab框实例

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>实现简单的tab框</title> <link rel="stylesheet" href=&qu

  • jQuery实现简单全选框

    本文实例为大家分享了jQuery实现简单全选框的具体代码,供大家参考,具体内容如下 1.要求: (1)实现全选框勾选时其他复选框全部选中,全选框取消勾选时其他 复选框全部取消选中 (2)当复选框有取消选中时,全选框也要取消勾选 2.HTML部分 <table id="table"> <thead><tr><th colspan="6">学生信息表</th></tr></thead>

  • Java实现简单QQ聊天工具

    Java实现简单的类似QQ聊天工具,供大家参考,具体内容如下 所使用到的知识点: java socket编程之TCP协议 java Swing 简单的java多线程 运行截图: 服务器端实现: package tcp_server; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.

  • 基于jQuery实现简单人工智能聊天室

    花了俩小时折腾出来的,jQuery人工智能聊天室长这样: 主要功能: 1.当然是聊天啦~点击飞机按钮或者回车可以发送消息到面板. 2.输入特定的内容,系统会给你相应的回复(这里我只设置了Hello,How are you和询问时间的自动回复). 3.点击叉叉可以清除面板上的所有聊天记录. 4.问时间的时候,根据现在的时间,会给你相应的不同的回复,比如现在是22-23点,系统会回复你"good night". 5.随着聊天的进行,聊天面板右侧的滚动条会一直维持在最底部. HTML: &l

  • jquery模拟多级复选框效果的简单实例

    今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c

  • jQuery简单设置文本框回车事件的方法

    本文实例讲述了jQuery简单设置文本框回车事件的方法.分享给大家供大家参考,具体如下: $(document).ready(function () { $("#txt_JumpPager").keydown(function (e) { var curKey = e.which; if (curKey == 13) { $("#lbtn_JumpPager").click(); return false; } }); }); 其中的txt_JumpPager为文本

  • JQuery实现简单的复选框树形结构图示例【附源码下载】

    JQuery实现简单的复选框树形结构图示例【附源码下载】

    本文实例讲述了JQuery实现简单的复选框树形结构图.分享给大家供大家参考,具体如下: 这是自己写的简单树形结构图,实现的功能有: 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的所有的子节点也选中:父节点未选中,则下面的所有的子节点也取消选中(全选和全不选) 3.选中一个子节点时相应的父节点也选中:当所有的子节点都没有选中时,父节点也取消选中 这是实现的最简单的功能.下面来具体的谈谈具体的实现: 1.引入库 所有的这些操作都是通过JQuery来实现的,所以首先要

随机推荐