快捷導(dǎo)航

javascript實(shí)現(xiàn)簡易聊天室

更新時間：2019年07月12日 11:54:44 作者：smile@qingqing

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡易聊天室，具有一定的參考價值，感興趣的小伙伴們可以參考一下

聊天室是我們經(jīng)常見的，比如微信聊天界面、QQ聊天界面等等，一個簡易的聊天室如下：

1.html代碼

<div class="content">
 <div class="section"></div>
 <form action="#">
 <textarea id="$value"></textarea>
 <button type="button" id="sub">發(fā)送</button>
 </form>
</div>

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代碼

<script type="text/javascript">
 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); 
 }
 }
 //以上代碼可以單獨(dú)封裝成一個函數(shù)
 var count = 0;
 $('#sub').onclick=function(){
 //當(dāng)點(diǎn)擊發(fā)送按鈕后，創(chuàng)建class名為line的盒子，來盛放聊天的內(nèi)容
 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++;
 }
 
</script>

4.效果圖