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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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 字符串压缩方法比较示例
2014/01/23 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
如何学习Python time模块
2020/06/03 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
初中科学教学反思
2014/01/21 职场文书
大学生毕业鉴定
2014/01/31 职场文书
房产转让协议书
2014/04/11 职场文书
公司给客户的感谢信
2015/01/23 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android