jQuery实现简易QQ聊天框


Posted in jQuery onFebruary 10, 2020

本文实例为大家分享了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实现简易QQ聊天框

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
详解jquery选择器的原理
Aug 01 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现简单聊天室
Feb 08 #jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
jQuery实现获取多选框的值示例
Feb 07 #jQuery
You might like
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP解决中文乱码
2017/04/28 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python scatter函数用法实例详解
2020/02/11 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
什么是python类属性
2020/06/10 Python
会计电算化个人自我评价
2013/11/17 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
学校欢迎标语
2014/06/18 职场文书
检讨书模板
2015/01/29 职场文书
办公室岗位职责范本
2015/04/11 职场文书
环保宣传语大全
2015/07/13 职场文书
企业法律事务工作总结
2015/08/11 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
详解python的内存分配机制
2021/05/10 Python