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 相关文章推荐
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
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
通过文字传递创建的图形按钮
2006/10/09 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python发布模块的步骤分享
2014/02/21 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
高中毕业生个人自我鉴定
2013/11/24 职场文书
学校安全教育制度
2014/01/31 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
客房服务员岗位职责
2015/02/09 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis