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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
如何在vue 中引入使用jquery
Nov 10 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
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
JS 树形递归实例代码
2010/05/18 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
Django 路由控制的实现代码
2018/11/08 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python 读取串口数据的示例
2020/11/09 Python
实习评语
2013/12/16 职场文书
高一化学教学反思
2014/02/05 职场文书
化妆品促销方案
2014/02/24 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
python实现过滤敏感词
2021/05/08 Python
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
python神经网络 使用Keras构建RNN训练
2022/05/04 Python