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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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错误级别的设置方法
2013/06/17 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Python是怎样处理json模块的
2020/07/16 Python
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
设计师个人求职信范文
2014/02/02 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
Java设计模式之代理模式
2022/04/22 Java/Android