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 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
Javascript 之封装(Package)
Sep 14 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
VSCode launch.json配置详细教程
Jun 18 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python最长公共子串算法实例
2015/03/07 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
C语言中break与continue的区别
2012/07/12 面试题
3个CCIE对一个工程师的面试题
2012/05/06 面试题
大学专科生推荐信范文
2013/11/23 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
PHP中strval()函数实例用法
2021/06/07 PHP