JS实现的类似微信聊天效果示例


Posted in Javascript onJanuary 29, 2019

本文实例讲述了JS实现的类似微信聊天效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com JS仿微信聊天效果</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .box{
      width: 250px;
      height: 400px;
      border: 1px solid #cccccc;
      float: left;
      margin-left: 200px;
      position: relative;
    }
    .fox{
      width: 250px;
      height: 400px;
      border: 1px solid #cccccc;
      float: left;
      margin-left: 200px;
      position: relative;
    }
    .box1{
      width: 250px;
      height: 20px;
      background: #cdcdcd;
      line-height: 20px ;
      text-align: center;
    }
    .fox1{
      width: 250px;
      height: 20px;
      background: #cdcdcd;
      line-height: 20px ;
      text-align: center;
    }
    .box3{
      width: 250px;
      height: 30px;
      bottom: 0px ;
      position: absolute;
    }
    .fox3{
      width: 250px;
      height: 30px;
      bottom: 0px ;
      position: absolute;
    }
    .input1{
      width: 200px;
      height: 28px;
    }
    .input2{
      width: 40px;
      height: 30px;
    }
    .input3{
      width: 200px;
      height: 28px;
    }
    .input4{
      width: 40px;
      height: 30px;
    }
    .text1{
      overflow: scroll;
      overflow-x: hidden;
      overflow-y: visible;
      height: 350px;
    }
    .text2{
      overflow: scroll;
      overflow-x: hidden;
      overflow-y: visible;
      height: 350px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">AAAAAAAA</div>
    <div class="text1"></div>
    <div class="box3">
      <input class="input1" type="text">
      <input class="input2" type="button" value="发送">
    </div>
  </div>
  <div class="fox">
    <div class="fox1">BBBBBBBB</div>
    <div class="text2"></div>
    <div class="fox3">
      <input class="input3" type="text">
      <input class="input4" type="button" value="发送">
    </div>
  </div>
  <script>
    var oIpt1=document.getElementsByClassName("input1")[0];
    var oIpt3=document.getElementsByClassName("input3")[0];
    var oIpt2=document.getElementsByClassName("input2")[0];
    var oIpt4=document.getElementsByClassName("input4")[0];
    var oText1=document.getElementsByClassName("text1")[0];
    var oText2=document.getElementsByClassName("text2")[0];
    oIpt2.onclick=function () {
      var newDate=new Date();
      var oHouer=newDate.getHours();
      var oMinutes=newDate.getMinutes();
      var oSecond=newDate.getSeconds();
      var oDiv1=document.createElement("div")
      var oDiv2=document.createElement("div")
      var oDiv3=document.createElement("div")
      var oDiv4=document.createElement("div")
      oDiv1.style.textAlign="right"
      oDiv2.style.textAlign="left"
      oDiv3.style.textAlign="center"
      oDiv4.style.textAlign="center"
      oText1.appendChild(oDiv3);
      oText1.appendChild(oDiv1);
      oText2.appendChild(oDiv4)
      oText2.appendChild(oDiv2);
      oDiv3.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒"
      oDiv4.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒"
      oDiv1.innerHTML=oIpt1.value;
      oDiv2.innerHTML=oIpt1.value;
      oIpt1.value=""
    }
    oIpt4.onclick=function () {
      var newDate=new Date();
      var oHouer=newDate.getHours();
      var oMinutes=newDate.getMinutes();
      var oSecond=newDate.getSeconds();
      var oDiv1=document.createElement("div")
      var oDiv2=document.createElement("div")
      var oDiv3=document.createElement("div")
      var oDiv4=document.createElement("div")
      oDiv1.style.textAlign="center"
      oDiv2.style.textAlign="center"
      oDiv3.style.textAlign="right"
      oDiv4.style.textAlign="left"
      oText2.appendChild(oDiv1);
      oText1.appendChild(oDiv2);
      oText2.appendChild(oDiv3);
      oText1.appendChild(oDiv4);
      oDiv1.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒"
      oDiv2.innerHTML=oHouer+"时"+oMinutes+"分"+oSecond+"秒"
      oDiv3.innerHTML=oIpt3.value;
      oDiv4.innerHTML=oIpt3.value;
      oIpt3.value=""
    }
  </script>
</body>
</html>

运行效果如下:

JS实现的类似微信聊天效果示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
基于datagrid框架的查询
Apr 08 Javascript
node.js中watch机制详解
Nov 17 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue实现form表单与table表格的数据关联功能示例
Jan 29 #Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 #Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 #Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 #Javascript
vue实现的下拉框功能示例
Jan 29 #Javascript
angular4中引入echarts的方法示例
Jan 29 #Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 #Javascript
You might like
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
js登录弹出层特效
2014/03/07 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python实现端口转发器的方法
2015/03/13 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
pygame实现飞机大战
2020/03/11 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
超市客服工作职责
2014/06/11 职场文书
同志主要表现材料
2014/08/21 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
2014年市场部工作总结
2014/11/25 职场文书
把77A收信机改造成收音机
2022/04/05 无线电