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 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
Jquery中map函数的用法
Jun 03 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
微信小程序开发摇一摇功能
Nov 22 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实现的堆排序算法详解
2017/08/17 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python 文件和输入输出小结
2013/10/09 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
python中使用print输出中文的方法
2018/07/16 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
表达自我的市场:Society6
2018/08/01 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
仓库门卫岗位职责
2013/12/22 职场文书
综合实践活动方案
2014/02/14 职场文书
初级会计求职信范文
2014/02/15 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
英语故事演讲稿
2014/04/29 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
运动会跳远广播稿
2015/08/19 职场文书
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技