jQuery实现简易QQ聊天框

2024-09-26 20:58:53

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>例子1</title>
<style type="text/css">
*{list-style: none;margin: 0;padding: 0;}
.box1{
 width: 500px;
 height: 480px;
 border: 1px solid #aaa;
 margin: 0 auto;
 margin-top: 20px;
}
.box{
 width: 500px;
 height: 250px;
 overflow: auto;
}
#bb{
 width: 494px;
 margin-top: -5px;
 border: 1px solid white;
 outline: none;
}
img{
 width: 500px;
}
.btn{
 margin-left:325px;
}
.btn,.btn1{
 background: #069dd5;
 width: 80px;
 padding: 3px 0;
 border-radius: 7px;
 color: white;
 font-size: 14px;
 outline: none;
}
.image{
 margin: 5px;
 width: 50px;
}
.pp{
 margin-left: 60px;
 margin-top: -50px;
 color: #009494;
 margin-bottom: 10px;
}
.ppp{
 width: 400px;
 margin-left: 60px;
 background: #eee;
 border-radius: 5px;
 padding: 5px;
 font-size: 14px;
}
.item{
 margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box1">
 <div class="box">
 <ul class="items"></ul>
 </div>
 <img src="asd.jpg" alt="">
 <textarea name="" id="bb" cols="30" rows="10"></textarea>
 <button class="btn">关闭(c)</button>
 <button class="btn1">发送(s)</button>

</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
 var ul = $(".items")
 var arr=[1,2,3]
 var arr1=["松松","六月的雨","毛毛"]
 function num(n,m){
 //封装随机数
 return Math.round(Math.random()*(m-n)+n)
 }
 $(".btn1").click(function(){
 //创建按钮点击事件
 var li = $("<li></li>")
 //创建一个li标签
 var imgs = $("<img src='' alt=''/>")
 //创建一个img标签
 var h4 = $("<h4></h4>")
 //创建一个h4标签
 var p = $("<p></p>")
 //创建一个p标签
 var val = bb.value;
 //获取文本域的值
 p.html(val);
 //把文本域的值赋给p标签
 $(p).addClass("ppp")
 //给p标签加一个css样式
 $(li).addClass("item")
 //给li加一个css样式
 li.appendTo(ul)
 //把li插入到ul内
 bb.value = "";
 //清空文本域内容
 var arr2 = num(0,arr.length-1)
 //提取随机数
 $(h4).addClass("pp")
 //给h4添加css样式
 h4.html(arr1[arr2])
 //给h4赋值
 $(imgs).attr({"src":arr[arr2]+".jpg"})
 //给img添加属性和属性值
 $(imgs).addClass("image")
 //给img添加一个css样式
 p.appendTo(li)
 //将p标签插入li内
 h4.prependTo(li)
 //将h4标签插入li内
 imgs.prependTo(li)
 //将img标签插入li内
 $(".box").scrollTop($(".box")[0].scrollHeight);
 //让滚动条始终在最底端
 })
})
</script>
</html>

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

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实现消息聊天框的具体代码,供大家参考,具体内容如下上代码 <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聊天框的具体代码,供大家参考,具体内容如下 <!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聊天框的具体代码,供大家参考,具体内容如下先放一张效果图! 1.首先我们把基本框架搭出来,还要准备三张图片用来当作头像,下面是html的内容 <body> <section id="chat"> <div class="chatBody"></div> <div> <img src="images/icon.jpg"> </
JavaScript实现简易QQ聊天界面

本文实例为大家分享了JavaScript实现简易QQ聊天界面的具体代码,供大家参考,具体内容如下题目: 制作一个简易聊天界面,当用户在界面下方的文本框中输入信息后,点击发送按钮,文本框中的信息发送到界面中部的信息显示区域,同时信息输入文本框中的信息被清空,等待下次信息录入.信息从上往下一条条显示. 操作界面如下图所示: 题目分析: 1.用户输入信息,需要文本框text:2.确定输入的信息后,点击发送按钮,即button按钮:3.文本框的信息将显示在信息显示区域textarea,或者div,本文
Qt实现简易QQ聊天界面

本文实例为大家分享了Qt实现简易QQ聊天界面的具体代码,供大家参考,具体内容如下代码 myDialog.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QWidget> #include <QToolButton> #include <QVBoxLayout> #include <QHBoxLayout> #include <QList> class MyDialog : public
jQuery编写QQ简易聊天框

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

本文实例为大家分享了JavaScript实现QQ聊天室的具体代码,供大家参考,具体内容如下 1. 任务要求 1)掌握基本过滤选择器: 2)掌握jQuery对象的click()方法: 3)掌握jQuery对象的css()方法: 4)掌握jQuery对象的addClass()方法: 5)如何获取指定元素的值? 6)如何设置元素的显示和隐藏? 7)如何设置元素的html代码? 2. 需求说明制作显示如下图所示的QQ聊天页面.随机用户在文本框中输入文本后点击“发送”按钮,文本中的消息将显示在“聊天记录
php+mysql+jquery实现简易的检索自动补全提示功能

本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能.分享给大家供大家参考,具体如下: 这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂.心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下.思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作. html+jQuery内容: <html> <head> <style type="text/css"> #autoBox { marg
基于jQuery实现的QQ表情插件

不废话了,先给大家展示效果图: 查看演示下载源码我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

jQuery实现简易QQ聊天框

相关推荐

随机推荐