本文实例讲述了JS实现的类似微信聊天效果。分享给大家供大家参考,具体如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net JS仿微信聊天效果& lt;/title>
& lt; style>
* {
保证金:0;
填充:0;
}
.box {
宽度:250 px;
身高:400 px;
边界:1 px固体# cccccc;
浮:左;
margin-left: 200 px;
位置:相对;
}
.fox {
宽度:250 px;
身高:400 px;
边界:1 px固体# cccccc;
浮:左;
margin-left: 200 px;
位置:相对;
}
.box1 {
宽度:250 px;
高度:20 px;
背景:# cdcdcd;
行高:20 px;
text-align:中心;
}
.fox1 {
宽度:250 px;
高度:20 px;
背景:# cdcdcd;
行高:20 px;
text-align:中心;
}
.box3 {
宽度:250 px;
高度:30 px;
底部:0 px;
位置:绝对的;
}
.fox3 {
宽度:250 px;
高度:30 px;
底部:0 px;
位置:绝对的;
}
.input1 {
宽度:200 px;
高度:28 px;
}
.input2 {
宽度:40像素;
高度:30 px;
}
.input3 {
宽度:200 px;
高度:28 px;
}
.input4 {
宽度:40像素;
高度:30 px;
}
.text1 {
溢出:滚动;
overflow-x:隐藏;
overflow-y:可见;
身高:350 px;
}
.text2 {
溢出:滚动;
overflow-x:隐藏;
overflow-y:可见;
身高:350 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="盒子"比;
& lt; div类=" box1 "祝辞AAAAAAAA
& lt; div类=" text1 "祝辞& lt;/div>
& lt; div类=癰ox3”比;
& lt;输入类=癷nput1”类型=拔谋尽北?
& lt;输入类=" input2 " type="按钮" value=" https://www.yisu.com/zixun/发送”在
& lt;/div>
& lt;/div>
& lt; div类=案？怂埂北?
& lt; div类=" fox1 "祝辞BBBBBBBB
& lt; div类=" text2 "祝辞& lt;/div>
& lt; div类=癴ox3”比;
& lt;输入类=癷nput3”类型=拔谋尽北?
& lt;输入类=" input4 " type="按钮" value=" https://www.yisu.com/zixun/发送”在
& lt;/div>
& lt;/div>
& lt; 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日期();
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=罢贰?
oDiv2.style.textAlign=白蟆?
oDiv3.style.textAlign="中心"
oDiv4.style.textAlign="中心"
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日期();
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="中心"
oDiv2.style.textAlign="中心"
oDiv3.style.textAlign=罢贰?
oDiv4.style.textAlign=白蟆?
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=" "
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
