js编写简单的聊天室功能


Posted in Javascript onAugust 17, 2017

这个聊天室写的特别简易,比较适合刚开始学习js的同学借鉴,当然,写的不好,也希望诸位大神可以进行批评改正。

聊天室要求:

1.不能发空消息
2.敏感字***显示
3.图片替换 开心,尴尬
4.显示聊天内容和时间
5.每发一条信息,随机显示名称,先把一些名称定义到array里面

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   *{ 
    box-sizing: border-box; 
   } 
   .left{ 
    float: left; 
    width: 20%; 
    height: 650px; 
    color: red; 
    border: 1px solid red; 
    border-right: 20px solid cornflowerblue; 
   } 
   .center{ 
    position: relative; 
    float: left; 
    width: 60%; 
    height: 650px; 
    border: 1px solid darkcyan; 
   } 
   .chatList{ 
    width: 100%; 
    height: 500px; 
    overflow-y: scroll; 
   } 
   .bottom{ 
    position: absolute; 
    width: 100%; 
    height: 150px; 
    left: 0; 
    bottom: 0; 
    background: skyblue; 
   } 
   .bottom textarea{ 
    width: 70%; 
    height: 100%; 
    font-size: 18px;; 
    vertical-align: middle; 
    border: 1px solid red; 
    background: blanchedalmond; 
   } 
   .bottom input{ 
    width: 80px; 
    height: 40px; 
    margin-left: 30px; 
   } 
   .right{ 
    float: right; 
    color: #000000; 
    border-right: 0; 
    border-left: 20px solid cornflowerblue; 
   } 
  </style> 
 </head> 
 <body onload="loadTime()"> 
  <div class="left" id="left"> 
    
  </div> 
  <div class="center" id="center"> 
   <div class="chatList" id="chatList"> 
     
   </div> 
   <div class="bottom"> 
    <textarea id="content" name="content" ></textarea> 
    <input type="button" name="send" id="send" value="点击发送" onclick="sendMessage()" /> 
   </div> 
  </div> 
  <div class="left right"> 
   <p>1.不能发空消息</p> 
   <p>2.敏感字***显示</p> 
   <p>3.图片替换 开心,尴尬</p> 
   <p>4.显示聊天内容和时间</p> 
   <p>5.每发一条信息,随机显示名称,先把一些名称定义到array里面</p> 
  </div> 
   
 </body> 
 <script type="text/javascript"> 
//  document.getElementById("chatList").scrollHeight; 
 /* 
   添加敏感字替换成**---8.10 
  * */ 
  function loadTime(){ 
   var time = new Date(); 
    
   var hours = (time.getHours()).toString(); 
   if(hours.length < 2){ 
    hours = "0" + hours; 
   } 
   var minutes = (time.getMinutes()).toString(); 
   if(minutes.length < 2){ 
    minutes = "0" + minutes; 
   } 
   var seconds = (time.getSeconds()).toString(); 
   if(seconds.length < 2){ 
    seconds = "0" + seconds; 
   } 
   var timeReturn = hours + ":" + minutes + ":" + seconds; 
   document.getElementById("left").innerHTML = timeReturn; 
   return timeReturn; 
  } 
  setInterval("loadTime()",1000); 
  var chatContents = ""; 
  var count = 0; 
  function sendMessage(){ 
   //通过调用randomName()函数来得到一个随机的名字 
   var name = randomName(); 
   //通过调用randomColor()函数来得到一个随机的颜色 
   var colorR = randomColor(); 
   //得到textarea中的内容 
   var content = document.getElementById("content").value; 
   //判断输入内容是否为空 
   if (content == "") { 
    alert("输入内容不能为空!!!"); 
    return; 
   } 
   //通过正则表达式来获取要替换的字符串 
   var regExp = /藏独|台独|傻逼|你大爷/g; 
   var regExp1 = /开心/g; 
   var regExp2 = /尴尬/g; 
//   var imgReplace = content.replace(regExp,"高兴"); 
   //获取开心图片路径 
   var path1 = '<img src="img/chui.png"/>'; 
   //获取尴尬图片的路径 
   var path2 = '<img src="img/mouse.png"/>'; 
   //敏感字替换; 
   content = content.replace(regExp,"***"); 
   //将开心替换成开心图片的字符串; 
//   txtReplace(content); 
   var imgReplace = content.replace(regExp1,path1); 
//   alert(imgReplace); 
   //将尴尬替换成尴尬图片的字符串; 
   imgReplace = imgReplace.replace(regExp2,path2); 
//   alert(imgReplace); 
   var chatContent = "<span>"+ name + ":" + "</span>" + " " + imgReplace; 
//   字符串拼接聊天记录 
   chatContents =chatContents + chatContent + " " + loadTime() +"<br/>"; 
   document.getElementById("chatList").innerHTML = chatContents; 
   //点击发送后,textarea中的内容设为空 
   document.getElementById("content").value = ""; 
   var txtColor = document.getElementsByTagName("span")[count]; 
   count++; 
   //设置span的随机颜色 
   txtColor.style.color = colorR; 
  } 
  function randomName(){ 
   var i = parseInt(Math.random() * (6 - 0 + 1) + 0); 
   var arrName = new Array("果果","六六","格格","明明","小花","兰兰","花花"); 
   return arrName[i]; 
  } 
  function randomColor(){ 
   var r = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16); 
   if(r.length < 2){ 
    r = "0" + r; 
   } 
   var g = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16); 
   if(g.length < 2){ 
    g = "0" + g; 
   } 
   var b = parseInt(Math.random() * (255 - 0 + 1) + 0).toString(16); 
   if(b.length < 2){ 
    b = "0" + b; 
   } 
   return "#" + r + g + b; 
  } 
   
 </script> 
</html>

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

Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
javascript入门教程基础篇
Nov 16 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 #Javascript
js实现方块上下左右移动效果
Aug 17 #Javascript
JavaScript中一些特殊的字符运算
Aug 17 #Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 #Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 #Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
多重?l件?合查?(一)
2006/10/09 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
修改发贴的编辑功能
2007/03/07 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js字符串转成JSON
2013/11/07 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
浅谈Python中的继承
2020/06/19 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
本科毕业论文指导教师评语
2014/12/30 职场文书
骨干教师考核评语
2014/12/31 职场文书
企业百日安全活动总结
2015/05/07 职场文书
军事理论课感想
2015/08/11 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python