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.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jquery插件懒加载的示例
Oct 24 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通用检测函数集合
2006/11/25 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python实现Restful API的例子
2019/08/31 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
端午节粽子促销活动方案
2014/02/02 职场文书
演讲稿格式
2014/04/30 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
美丽心灵观后感
2015/06/01 职场文书
健康证明
2015/06/19 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
python使用glob检索文件的操作
2021/05/20 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang