好资源导航 » 文章资讯 » jQuery实现简易QQ聊天框

jQuery实现简易QQ聊天框

2023-08-01 21:49:04 214

本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码，供大家参考，具体内容如下





例子1

*{list-style:none;margin:0;padding:0;}
.box1{
width:500px;
height:480px;
border:1pxsolid#aaa;
margin:0auto;
margin-top:20px;
}
.box{
width:500px;
height:250px;
overflow:auto;
}
#bb{
width:494px;
margin-top:-5px;
border:1pxsolidwhite;
outline:none;
}
img{
width:500px;
}
.btn{
margin-left:325px;
}
.btn,.btn1{
background:#069dd5;
width:80px;
padding:3px0;
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(){ varul=$(".items") vararr=[1,2,3] vararr1=["松松","六月的雨","毛毛"] functionnum(n,m){ //封装随机数 returnMath.round(Math.random()*(m-n)+n) } $(".btn1").click(function(){ //创建按钮点击事件 varli=$("

") //创建一个li标签 varimgs=$("") //创建一个img标签 varh4=$("

") //创建一个h4标签 varp=$("

") //创建一个p标签 varval=bb.value; //获取文本域的值 p.html(val); //把文本域的值赋给p标签 $(p).addClass("ppp") //给p标签加一个css样式 $(li).addClass("item") //给li加一个css样式 li.appendTo(ul) //把li插入到ul内 bb.value=""; //清空文本域内容 vararr2=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); //让滚动条始终在最底端 }) })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现简易QQ聊天框

热门推荐

随机推荐