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 new关键字的玄机 以及其它
Aug 25 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
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 随机数的深入理解
2013/06/05 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
js实现tab切换效果
2017/02/16 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
理解javascript async的用法
2017/08/22 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
python避免死锁方法实例分析
2015/06/04 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
基于python实现百度翻译功能
2019/05/09 Python
师范生个人推荐信
2013/11/29 职场文书
历史系自荐信范文
2013/12/24 职场文书
工程质量月活动方案
2014/02/19 职场文书
《春天来了》教学反思
2014/04/07 职场文书
梅花魂教学反思
2014/04/25 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
公司开业致辞
2015/07/29 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers