html按钮实现聊天功能实现原理,javascript实现简易聊天室

聊天室是我们经常见的，比如微信聊天界面、QQ聊天界面等等，一个简易的聊天室如下：

1.html代码

发送

2.css代码

.content{

border-radius: 5px;

border: 2px solid #cccccc;

width: 500px;

height: 700px;

margin: 50px auto 0;

overflow: hidden;

}

.section{

width: 500px;

height: 569px;

overflow-x: hidden;

overflow-y: auto;

border-bottom: 1px solid #cccccc;

padding-top: 30px;

}

.section::-webkit-scrollbar{

display: none;

}

form{

width: 500px;

height: 100px;

}

form textarea{

outline: none;

border: none;

display: block;

float: left;

width: 370px;

height: 100px;

font-size: 25px;

text-align: top;

line-height: 35px;

resize: none;

}

form button{

outline: none;

border: none;

display: block;

float: left;

width: 130px;

height: 100px;

}

form button:active{

background: #ccc;

}

.line{

width: 500px;

overflow: hidden;

}

.left,.right{

height: auto;

font-size: 25px;

line-height: 50px;

border-radius: 10px;

padding: 0 10px;

overflow-wrap: break-word;

margin-bottom: 20px;

}

.left{

max-width: 400px;

margin-left: 20px;

float: left;

background: rgb(243, 244, 245);

}

.right{

max-width: 400px;

float: right;

margin-right: 20px;

background: rgb(79, 230, 49);

}

3.js代码

function $(str){

if (str[0]=='.') {

return document.getElementsByClassName(str.substring(1));

}else if (str[0]=='#') {

return document.getElementById(str.substring(1));

}else{

return document.getElementsByTagName(str);

}

}

//以上代码可以单独封装成一个函数

var count = 0;

$('#sub').οnclick=function(){

//当点击发送按钮后，创建class名为line的盒子，来盛放聊天的内容

var div = document.createElement('div');

div.className = 'line';

$('.section')[0].appendChild(div);

var str = $('#$value').value;

var p = document.createElement('p');

if (count%2==1) {

p.className = 'left';

}else{

p.className = 'right';

}

p.innerHTML = str;

$('#$value').value = '';

div.appendChild(p);

count++;

}

4.效果图

好啦，一个简易的聊天室就制作完啦！

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

时间： 2019-07-11