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树插件zTree使用方法详解
May 02 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 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堆排序(heapsort)练习
2013/11/13 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
Node.js模块加载详解
2014/08/16 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python批量修改xml属性的实现方式
2020/03/05 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
办公室内勤工作职责
2013/12/11 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
诚信承诺书模板
2014/05/26 职场文书
会计工作岗位职责
2015/02/03 职场文书
自荐信模板大全
2015/03/27 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Python中使用ipython的详细教程
2021/06/22 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python