聊天框

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 ; }) ;

猜你喜欢

转载自blog.csdn.net/lh95lbw/article/details/80889353