HTML如何编写类似QQ聊天框,jQuery实现简易QQ聊天框
本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码,供大家参考,具体内容如下
例子1
*{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;
}
关闭(c)
发送(s)
$(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标签
var imgs = $("")
//创建一个img标签
var h4 = $("
")
//创建一个h4标签
var 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);
//让滚动条始终在最底端
})
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
HTML如何编写类似QQ聊天框,jQuery实现简易QQ聊天框相关推荐
- html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法 在页面中引入下面的文件. lt;l ...
- java qq聊天界面代码,Java简易qq聊天,代码
Java简易qq聊天,代码 关注:156 答案:2 手机版 解决时间 2021-02-26 11:56 提问者心死旳很干净 2021-02-25 16:17 Java简易qq聊天,代码 最佳答案 ...
- html获取qq头像代码,jQuery在线获取QQ名称和头像
正文 昨天群里有人问到dux主题的评论处输入QQ号直接获取名称和头像是怎么实现的,我看了一下dux主题,发现并没有集成这个功能,倒是emlog的dux主题内置了这个功能,本来想移植过来wordpres ...
- php jquery 弹窗提示框,jQuery实现消息弹出框效果
本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下 效果图 实现代码 .showMessage { padding: 5px 10px; border-radius: 5p ...
- 简单步骤,使用 Android studio 实现保存 QQ 账号密码,和简易 QQ 用户登录界面
利用 Android studio 2021 软件输出一个简易用户登录界面,拥有头像并且能够实现对自行输入的账号密码进行保存,文件名为 saveqq,功能实现对账号与密码的输入和存储,简单QQ界面布局 ...
- qq html制作,jquery学习练习:制作QQ简易聊天框
使用html( )获取和设置页面内容 使用val( )获取聊天内容 使用addClass( )为指定元素追加样式 使用数组保存聊天人员头像和昵称 使用随机函数获取聊天人员的头像和昵称 在输入框中输入内 ...
- jQuery基本操作--制作QQ简易聊天框
需求: 训练要点 1 .使用 html( ) 获取和设置页面内容 2 .使用 val( ) 获取聊天内容 3 .使用 addClass( ) 为指定元素追加样式 4 .使用数组保存聊天人员头像和昵称 ...
- qq聊天框java_jQuery实现简单QQ聊天框
本文实例为大家分享了jQuery实现简单QQ聊天框的具体代码,供大家参考,具体内容如下 先放一张效果图! 1.首先我们把基本框架搭出来,还要准备三张图片用来当作头像,下面是html的内容 关闭(C) ...
- 类似QQ管家页面jquery图片显隐轮换效果
一晃端午节又过去了,又得开始新的工作累人啊. 这两天jquery博客有不少感慨,感觉人有时要是言而无信,那不管做什么事情都不会成功的,觉得,既然说出口了,或者,暗暗下决心做了,就一定做成功.如果不行, ...
最新文章
- 开发log4j配置_Spring 使用 Log4J 记录日志
- DB2 创建数据库、缓冲池和表空间
- GWT更改元素样式属性
- 2011年9月计算机C语言真题,2011年9月全国计算机二级C语言考试真题及答案.doc
- VTK:几何对象之RegularPolygonSource
- python中string数据库_python – 将字节字符串保存到数据库中的v...
- 隔离区别对待?如何捆绑?Java中的jdbc数据库事务及其隔离级别
- Git 和 Github 秘籍
- python windows开发_windows 下 python 开发是一种什么样的体验?
- 阿里云峰会|阿里云数据中台重磅升级后拟扶持100万家企业数智化
- QT使用插件开发界面
- Beats与Jenkins日志读取在Windows上的基本实现
- mysql no cache_关于对MySQL的SQL_NO_CACHE的理解和用法举例
- ubuntu 一张网卡绑定多个ip
- springboot 多环境配置文件
- linux下创造进程指令,Linux系统创建一个新进程(下)
- lodop打印控件——前端学习笔记
- 数据库常见面试题汇总
- AutoCAD DWG格式文件去除教育版戳记方法
- Struts2拦截器Filter