js实现同页面简易聊天框效果
如图为最后成品效果,下图为输入效果
同时实现了在输入框中使用回车可以打印的效果
具体js代码如下图
let otext=document.getElementsByClassName("textInput"); //找到两个输入文本框
let contBar=document.getElementsByClassName("contentBar"); //找到两个输出文本框
let oclick=document.getElementsByClassName("buttonInput"); //找到两个发送按钮
for (let i=0;i<oclick.length;i++){ //遍历两个按钮,并输出时间和对话文字
oclick[i].index=i; //传参
oclick[i].addEventListener("click",function () { //给两个按钮赋点击事件
if (otext[this.index].value!=""){ //判断对于的文本框是不是为空,不为空进入判断
let myDate=new Date();
let year=myDate.getFullYear();
let month=myDate.getMonth();
let date=myDate.getDate();
let h=myDate.getHours();
let m=myDate.getMinutes();
let s=myDate.getSeconds(); //以上创建时间对象并赋值
let p1=document.createElement("p");
let p2=document.createElement("p");
if (h<10){h="0"+h}
if (m<10){m="0"+m}
if (s<10){s="0"+s} //以上判断是否为个位数,是则在前加0
p1.classList.add("p_css1");
p1.innerText=year+"年"+month+"月"+date+"日 "+h+":"+m+":"+s;
if (h>=12){
p1.innerText+="pm";
}else {
p1.innerText+="am";
}
contBar[0].appendChild(p1);
let cp1=p1.cloneNode(true);
contBar[1].appendChild(cp1); //以上将时间变成符合条件的字符串,并创建两个对象赋值,打印到不同的输出文本框
p2.innerText=otext[this.index].value;
p2.style.margin="10px";
p2.style.width="200px";
let cp2=p2.cloneNode(true);
p2.style.textAlign="left";
cp2.style.textAlign="right";
p2.style.cssFloat="left";
cp2.style.cssFloat="right"; //以上为输入文字的左右样式设置
if (this.index==0){
contBar[0].appendChild(cp2);
contBar[1].appendChild(p2);
otext[0].value="";
}else {
contBar[0].appendChild(p2);
contBar[1].appendChild(cp2);
otext[1].value="";
} //以上为整理好的数据打印的位置
}
})
}
document.onkeydown=function(e){ //判断回车是否被按下,并通过开关来实现不同的效果
if (!e){
e=window.event;
}
if ((e.keyCode||e.which)==13){
if (sucs==true){
oclick[0].click();
} else if(sucs==false){
oclick[1].click();
}
}
};
otext[0].addEventListener("focus",function () { //第一个输入文本框被选中时,改变开关
sucs=true;
});
otext[1].addEventListener("focus",function () { //第二个输入文本框被选中时,改变开关
sucs=false;
});