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无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
javascript内置对象操作详解
Feb 04 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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 截取字符串专题集合
2010/08/19 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
jquery获取当前点击对象的value方法
2014/02/28 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python静态方法实例
2015/01/14 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
计算机专业毕业生自我鉴定
2014/01/16 职场文书
企业活动策划方案
2014/06/02 职场文书
中学生检讨书范文
2014/11/03 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers