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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
简单的js表单验证函数
Oct 28 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
深入理解js数组的sort排序
May 28 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
layui导航栏实现代码
May 19 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
5种 JavaScript 方式实现数组扁平化
Oct 05 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 array_shift()用法实例分析
2019/01/07 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python高级用法总结
2018/05/26 Python
Python argparse模块应用实例解析
2019/11/15 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
Python读写压缩文件的方法
2020/07/30 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
幼儿园小班评语大全
2014/04/17 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
金融与证券专业求职信
2014/06/22 职场文书
模范班主任事迹材料
2014/12/17 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL
delete in子查询不走索引问题分析
2022/07/07 MySQL
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python