JS实现的类似微信聊天效果示例
程序员文章站
2023-11-05 13:14:10
本文实例讲述了js实现的类似微信聊天效果。分享给大家供大家参考，具体如下：
本文实例讲述了js实现的类似微信聊天效果。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>www.jb51.net js仿微信聊天效果</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>
运行效果如下：
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试一下运行效果。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript页面元素操作技巧总结》、《javascript操作dom技巧总结》、《javascript切换特效与技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： 20种女性身材的联想