js实现微信聊天效果
程序员文章站
2024-01-19 15:43:58
本文实例为大家分享了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程序设计有所帮助。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Python 添加文件注释和函数注释操作