简单的聊天窗口php可运行,jQuery实现简易聊天框

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

效果：

CSS代码：

body{

margin: 0;

}

.kuan{

height:550px;

width: 650px;

background-color: #ccc;

margin: 80px auto;

}

.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;

}

.btn span{

display: inline-block;

padding: 0 10px;

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 + "

");

$(".chatBody p").addClass("a");//消息框颜色

$("textarea").val("");//发送框消息消失

}

});

});

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

时间： 2020-02-08