js实现简易聊天对话框

2023-09-26 07:58:05 183

聊天对话框 *{font-size:14px;padding:0;margin:0;} .main{ position:relative; margin:20pxauto; border:1pxsolidsteelblue; width:430px; height:400px; } .msgInput{ display:block; width:406px; height:60px; margin:10pxauto; } .sendbtn{ position:absolute; width:100px; height:29px; bottom:5px; right:10px; } .content{ list-style:none; width:410px; height:280px; margin:5pxauto; border:1pxdotted#D1D3D6; overflow-y:scroll; } .msgContent{ width:auto; max-width:250px; height:auto; word-break:break-all; margin:5px; padding:3px; border-radius:5px; } .content.left{ float:left; text-align:left; background-color:lightgrey; } .content.right{ float:right; text-align:right; background-color:yellowgreen; } window.onload=function(){ varinput=document.getElementById('msg_input');//查找缓存 document.getElementById('sendbtn').onclick=function(){ //varinput1=document.getElementById('msg_input');// //input0 sendMsg(); } //快捷键发送 document.onkeypress=function(event){ vare=event||window.event; varkeycode=e.keyCode||e.which; console.log(e) if(keycode==10){//判断同时按下ctrl和enter sendMsg() } } functionsendMsg(){ varinput=document.getElementById('msg_input');//查找缓存 varul=document.getElementById('content'); varnewLi=document.createElement('li'); newLi.innerHTML=input.value; newLi.className='msgContentright'; ul.appendChild(newLi); vardiv=document.createElement('div'); div.style='clear:both'; ul.appendChild(div); ajax({ url:'http://jisuznwd.market.alicloudapi.com/iqa/query?question='+input.value, success:function(res){ //console.log(res) varobj=JSON.parse(res); console.log(obj) vararray=obj.result.content; //varzhengzhou=array[0]; vartmp=array; //vartmp='温度:'+zhengzhou.day_air_temperature+','+zhengzhou.day_weather; console.log(tmp) varnewLi=document.createElement('li'); newLi.innerHTML=tmp; newLi.className='msgContentleft'; ul.appendChild(newLi); vardiv=document.createElement('div'); div.style='clear:both'; ul.appendChild(div); input.value=''; newLi.scrollIntoView();//将元素滚动到可见位置 } }) input.value=''; newLi.scrollIntoView();//将元素滚动到可见位置 } } functionajax(obj){ //?lastCursor=6610&pageSize=10 //varurl='reg.php'; varxhr=null; if(window.ActiveXObject){ xhr=newActiveXObject('Microsoft.XMLHTTP') }else{ xhr=newXMLHttpRequest(); } //$username=$_REQUEST['username']; //$password=$_REQUEST['password']; //打开与服务器的连接 if(obj.method){ xhr.open(obj.method,obj.url,true); }else{ xhr.open('get',obj.url,true); } xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.setRequestHeader("Authorization","APPCODE3e9dfb924f464e9593a95f9d2bbf4348") //{username:'zhangsa',password:123123} //sendData=encodeURIComponent(sendData); //发送请求 //console.log(res); //回调函数 xhr.onreadystatechange=function(){ //console.log(xhr.readyState) if(xhr.readyState==4){ //数据接收完毕 if(xhr.status==200){ //console.log('请求成功',xhr.responseText) if(obj.success){ obj.success(xhr.responseText) } }else{ //console.log(xhr.status,'请求出错') if(obj.failure){ obj.failure('请求失败') } } } } //varsendData='username=zhangsan&password=123456'; if(obj.method==undefined||obj.method.toLowerCase()=='get'){ xhr.send(null);// }else{ xhr.send(obj.params);// } } hello?

js实现简易聊天对话框

热门推荐

随机推荐