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 相关文章推荐
JS中 用户登录系统的解决办法
Apr 15 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
隐藏你的.php文件的实现方法
2007/03/19 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php实现简易计算器
2020/08/28 PHP
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
深入浅析python继承问题
2016/05/29 Python
mac系统安装Python3初体验
2018/01/02 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
夜班门卫岗位职责
2013/12/09 职场文书
追悼会上的答谢词
2014/01/10 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
文案策划求职信
2014/03/18 职场文书
政协委员个人总结
2015/03/03 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
学生会主席任命书
2015/09/21 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android