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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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读取纯真ip数据库使用示例
2014/01/26 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
实现PHP搜索加分页
2016/10/12 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JS打印gridview实现原理及代码
2013/02/05 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python中的函数用法入门教程
2014/09/02 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
劳资员岗位职责
2013/11/11 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2014年环卫工作总结
2014/11/22 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Redis主从复制操作和配置详情
2022/09/23 Redis