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.οnkeydοwn=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;
});