js实现简易聊天对话框

2019-11-19 15:45:47

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现简易聊天对话框的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>聊天对话框</title><style type="text/css">*{font-size: 14px; padding:0; margin:0;}.main{ position: relative; margin: 20px auto; border: 1px solid steelblue; width: 430px; height: 400px;}.msgInput{ display: block; width: 406px; height: 60px; margin: 10px auto;}.sendbtn{ position: absolute; width: 100px; height: 29px; bottom: 5px; right: 10px;}.content{ list-style: none; width: 410px; height: 280px; margin: 5px auto; border: 1px dotted #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;}</style><script type="text/javascript"> window.onload=function(){  var input = document.getElementById('msg_input');//查找缓存  document.getElementById('sendbtn').onclick=function () {   //var input1 = document.getElementById('msg_input');//   //input0   sendMsg();  }  //快捷键 发送  document.onkeypress = function (event) {   var e = event || window.event;   var keycode = e.keyCode || e.which;   console.log(e)   if( keycode==10){//判断同时按下ctrl 和enter    sendMsg()   }  }  function sendMsg() {   var input = document.getElementById('msg_input');//查找缓存   var ul = document.getElementById('content');   var newLi = document.createElement('li');   newLi.innerHTML = input.value;   newLi.className = 'msgContent right';   ul.appendChild(newLi);   var div = 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)     var obj = JSON.parse(res);     console.log(obj)     var array = obj.result.content;//     var zhengzhou = array[0];     var tmp = array;//     var tmp = '温度:'+zhengzhou.day_air_temperature+','+zhengzhou.day_weather;     console.log(tmp)     var newLi = document.createElement('li');     newLi.innerHTML = tmp;     newLi.className = 'msgContent left';     ul.appendChild(newLi);     var div = document.createElement('div');     div.style = 'clear:both';     ul.appendChild(div);     input.value = '';     newLi.scrollIntoView();//将元素滚动到可见位置    }   })   input.value = '';   newLi.scrollIntoView();//将元素滚动到可见位置  } } function ajax(obj) {  //?lastCursor=6610&pageSize=10//   var url = 'reg.php';  var xhr = null;  if(window.ActiveXObject){   xhr = new ActiveXObject('Microsoft.XMLHTTP')  }else{   xhr = new XMLHttpRequest();  }//  $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","APPCODE 3e9dfb924f464e9593a95f9d2bbf4348")  // {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('请求失败')     }    }   }  }//   var sendData = 'username=zhangsan&password=123456';  if( obj.method == undefined ||obj.method.toLowerCase() =='get'){   xhr.send(null);//  }else{   xhr.send(obj.params);//  } }</script></head><body> <div id="main" class="main">  <ul id="content" class="content">   <li class="msgContent left">hello?</li>   <div style="clear:both"></div>   <li class="msgContent left">hello</li>   <div style="clear:both"></div>   <li class="msgContent right">hi</li>   <div style="clear:both"></div>   <li class="msgContent left">hehe</li>   <div style="clear:both"></div>   <li class="msgContent left">goodbye</li>   <div style="clear:both"></div>   <li class="msgContent right">。。。。</li>   <div style="clear:both"></div>   <li class="msgContent right">sdfasdsadfd fasd fasd fasdfasdfasdf</li>   <div style="clear:both"></div>   <li class="msgContent right"> 哈哈</li>   <div style="clear:both"></div>  </ul>  <textarea id="msg_input" class="msgInput"></textarea>  <button id="sendbtn" class="sendbtn">发送</button> </div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Angularjs单选框相关的示例代码

下一篇：node.js+captchapng+jsonwebtoken实现登录验证示例