js实现微信聊天效果
作者:s_psycho 发布时间:2024-04-16 09:14:33
标签:js,微信聊天
本文实例为大家分享了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程序设计有所帮助。
来源:https://blog.csdn.net/weixin_42413689/article/details/80924950
0
投稿
猜你喜欢
- 之前说过要聊聊 干职业设计经理的活 的问题,貌似有些朋友对这个事情还挺关心的,我理解为一方面是掌握对付猎头时候的标准答案,一方面是
- 1.解读tensorflow权重文件,透过 tf.train.NewCheckpointReader函数。2.reader.get_vari
- 滚动条是什么大家自然都是知道的,可以非常直观地显示数据的变化,或者可以非常方便地改变某些数值。此前在介绍按钮、静态文本、输入文本这三个控件时
- df.fillna主要用来对缺失值进行填充,可以选择填充具体的数字,或者选择临近填充。官方文档DataFrame.fillna(self,
- 一、问题描述最近遇到一个问题,也就是使用分区表进行数据查询/加载的时候比普通表的性能下降了约50%,主要瓶颈出现在CPU,既然是CPU瓶颈理
- MySQL Version确认(版本确认)的几个方法1.SHOW VARIABLES LIKE 'VERSION';mysq
- 问题描述(以下讨论范围仅限Windows环境): D:\develop\ide\mysql\mysql5.5\bin> mysql -
- 具体代码如下所示:#coding=utf8from urllib import requestimport reimport urllib,
- 本文实例讲述了Python实现拼接多张图片的方法。分享给大家供大家参考。具体分析如下: 这里所述计划实现如下操作: ①
- 要说2017年什么技术最火爆,无疑是google领衔的深度学习开源框架Tensorflow。本文简述一下深度学习的入门例子MNIST。深度学
- Springboot连接数据库第一步springboot继承Mybatis及数据库连接依赖(上一篇文章已经记录 ) 第二步reso
- python烟花代码如下# -*- coding: utf-8 -*-import math, random,timeimport thre
- TFRecord作为tensorflow中广泛使用的数据格式,它跨平台,省空间,效率高。因为 Tensorflow开发者众多,统一训练时数据
- SQLyog是一款MySQL可视化工具,他可以将部分SQL操作通过图形化界面操作来完成,方便开发者更好的进行开发及数据库设计。在安装SQLy
- mysql 加了 skip-name-resolve不能链接的问题,要确认 MySql 是否采用过主机名的授权在 MySql Server
- 1、代码from aip import AipFaceimport cv2import timeimport base64from PIL
- 在将数据库从MSSQL迁移到MySQL的过程中,基于业务逻辑的要求,需要在MySQL的自增列插入0值。在MSSQL中是这样完成的: stri
- 前言ctypes是Python的外部函数库。它提供了C兼容的数据类型,并且允许调用动态链接库/共享库中的函数。它可以将这些库包装起来给Pyt
- 这些常量在 PHP 的内核中定义。它包含 PHP、Zend 引擎和 SAPI 模
- 一、BLOB字段BLOB是指二进制大对象也就是英文Binary Large Object的所写,而CLOB是指大字符对象也就是英文Chara