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 相关文章推荐
Prototype源码浅析 Number部分
Jan 16 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 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
跟我学Laravel之路由
2014/10/15 PHP
php无序树实现方法
2015/07/28 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python使用pymysql小技巧
2017/06/04 Python
Django 视图层(view)的使用
2018/11/09 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python安装selenium包详细过程
2019/07/23 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
校本教研活动总结
2014/07/01 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
nginx共享内存的机制详解
2022/03/21 Servers
JavaScript实现音乐播放器
2022/08/14 Javascript