javascript实现简易聊天室

 更新时间:2019年07月12日 11:54:45   作者:smile@qingqing   我要评论

这篇文章主要为大家详细介绍了javascript实现简易聊天室,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1.html代码

<div class="content">
 <div class="section"></div>
 <form action="#">
 <textarea id="$value"></textarea>
 <button type="button" id="sub">发送</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); 
 }
 }
 //以上代码可以单独封装成一个函数
 var count = 0;
 $('#sub').onclick=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++;
 }
 
</script>

4.效果图

好啦,一个简易的聊天室就制作完啦!

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

相关文章

  • JavaScript之RegExp_动力节点Java学院整理

    JavaScript之RegExp_动力节点Java学院整理

    正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的
    2017-06-06
  • JS实现黑客帝国文字下落效果

    JS实现黑客帝国文字下落效果

    看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种文字下落的效果,而且还有文字渐变效果,对我们学习研究JS还是挺有帮助的哦,下面跟着小编一起学习JS 黑客帝国文字下落效果吧
    2015-09-09
  • js判断设备是否为PC并调整图片大小

    js判断设备是否为PC并调整图片大小

    这篇文章主要介绍了js判断设备是否为PC并调整图片大小,需要的朋友可以参考下
    2014-02-02
  • React组件内事件传参实现tab切换的示例代码

    React组件内事件传参实现tab切换的示例代码

    本篇文章主要介绍了React组件内事件传参实现tab切换的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • js实现四舍五入完全保留两位小数的方法

    js实现四舍五入完全保留两位小数的方法

    这篇文章主要介绍了js实现四舍五入完全保留两位小数的方法,涉及javascript针对浮点数的数值运算相关技巧,需要的朋友可以参考下
    2016-08-08
  • JS实现网页滚动条感应鼠标变色的方法

    JS实现网页滚动条感应鼠标变色的方法

    这篇文章主要介绍了JS实现网页滚动条感应鼠标变色的方法,实例分析了javascript针对鼠标事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 基于javascript显示当前时间以及倒计时功能

    基于javascript显示当前时间以及倒计时功能

    这篇文章主要介绍了基于javascript显示当前时间以及倒计时功能的相关资料,需要的朋友可以参考下
    2016-03-03
  • JavaScript中神奇的call()方法

    JavaScript中神奇的call()方法

    这篇文章主要介绍了JavaScript中神奇的call()方法,本文用浅显的语言帮助你加深理解call()方法,需要的朋友可以参考下
    2015-03-03
  • 论JavaScript模块化编程

    论JavaScript模块化编程

    这篇文章主要介绍了论JavaScript模块化编程,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    这篇文章主要介绍了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能,结合实例形式分析了JSON.parse()与JSON.stringify()方法实现深拷贝的相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-03-03

最新评论