微客导航 » 文章资讯 » jQuery实现简易聊天框

jQuery实现简易聊天框

2023-08-01 22:53:04 324

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

效果：

CSS代码：

body{
margin:0;
}
.kuan{
height:550px;
width:650px;
background-color:#ccc;
margin:80pxauto;
}
.header{
width:100%;
height:35px;
background-color:#00f;
}
.chatBody{
width:100%;
height:70%;
overflow:auto;
}
.footer{
width:100%;
height:20%;
}
h2{
margin-bottom:0;
text-align:center;
}
.send{
background-color:green;
width:50px;
}
.btn{
text-align:right;
}
.btnspan{
display:inline-block;
padding:010px;
height:25px;
overflow:hidden;
color:#fff;
border-radius:5px;
background-color:#069dd5;
font-size:12px;
margin-right:3px;
cursor:pointer;
}
.chatText{
border:none;
width:100%;
height:50px;
}
#input{
margin-left:200px;
width:100px;
}
.a{
background-color:green;
border-radius:5px;
width:200px;
height:100%;
}

主代码：



聊天室

关闭(C)发送(S)

jQuery代码：



$("#demo").change(function(){
$("#input").val($(this).val());//将下拉框里的内容放到文本框里
});
$(document).ready(function(){
$("#send").click(function(){
var$nei=$("textarea").val();
var$n=$("#input").val();
if($nei.length==""){
alert("你没写东西啊");
}else{
var$currentstr=$(".chatBody").append(""+$n+":"+""+$nei+"");
$(".chatBodyp").addClass("a");//消息框颜色
$("textarea").val("");//发送框消息消失
}
});
});

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

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

返回顶部
3162201930
czq8825@qq.com

jQuery实现简易聊天框

聊天室

热门推荐

随机推荐