html做一个聊天输入框,JQuery实现聊天对话框

Document

.talk_con{

width:600px;

height:500px;

border:1px solid #666;

margin:50px auto 0;

background:#f9f9f9;

}

.talk_show{

width:580px;

height:420px;

border:1px solid #666;

background:#fff;

margin:10px auto 0;

overflow:auto;

}

.talk_input{

width:580px;

margin:10px auto 0;

}

.whotalk{

width:80px;

height:30px;

float:left;

outline:none;

}

.talk_word{

width:420px;

height:26px;

padding:0px;

float:left;

margin-left:10px;

outline:none;

text-indent:10px;

}

.talk_sub{

width:56px;

height:30px;

float:left;

margin-left:10px;

}

.atalk{

margin:10px;

}

.atalk span{

display:inline-block;

background:#0181cc;

border-radius:10px;

color:#fff;

padding:5px 10px;

}

.btalk{

margin:10px;

text-align:right;

}

.btalk span{

display:inline-block;

background:#ef8201;

border-radius:10px;

color:#fff;

padding:5px 10px;

}

// 写出对应功能代码

$(function(){

// 发送按钮单击，获取用户输入的数据，显示到上面的区域

var $talksub = $(‘#talksub‘)

var $words = $(‘#words‘)

$talksub.click(function(){

var vals = $(‘#talkwords‘).val()

alert(vals)

// 如果是a说 value==0，就显示a的样式的文字

var whoVal = $(‘#who‘).val()

var str = ‘‘

if(vals == ‘‘)

{

alert(‘请输入内容‘)

return

}

if(whoVal ==0)

{

str = ‘

A说：‘+vals+‘

‘

}

else

{

str = ‘

B说：‘+vals+‘

‘

}

// 原有内容的基础上加上 str

$words.html( $words.html() + str )

})

})

A说：吃饭了吗？

B说：还没呢，你呢？

A说：

B说：