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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
ES6中Set和Map用法实例详解
Mar 02 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
python实现目录树生成示例
2014/03/28 Python
Python性能优化的20条建议
2014/10/25 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python 制作简单的音乐播放器
2020/11/25 Python
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
求职者简历中的自我评价
2013/10/20 职场文书
心得体会范文
2014/01/04 职场文书
公司门卫工作职责
2014/06/28 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
三下乡活动心得体会
2016/01/23 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫