js实现微信聊天效果


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了js实现微信聊天效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</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>

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
js如何获取网页所有图片
May 12 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
element中的$confirm的使用
Apr 26 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
js实现盒子滚动动画效果
Aug 09 #Javascript
js仿京东放大镜效果
Aug 09 #Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
You might like
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
Python3.x对JSON的一些操作示例
2017/09/01 Python
一道python走迷宫算法题
2018/01/22 Python
python打开windows应用程序的实例
2019/06/28 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
新闻专业个人求职信
2013/12/19 职场文书
工地质量标语
2014/06/12 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
物业保安辞职信
2015/05/12 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
高中地理教学反思
2016/02/19 职场文书