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常用代码段收集
Oct 28 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
vue params、query传参使用详解
Sep 12 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
VUE动态生成word的实现
Jul 26 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
JS函数式编程实现XDM一
Jun 16 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP错误处理函数
2016/04/03 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python实现list由于numpy array的转换
2018/04/04 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python解析xml简单示例
2019/06/21 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
给导游的表扬信
2014/01/10 职场文书
实习推荐信
2014/05/10 职场文书
质量负责人岗位职责
2015/02/15 职场文书
审美与表现自我评价
2015/03/09 职场文书