这篇文章主要为大家详细介绍了js实现简易聊天对话框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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">
  <ul id="content">
   <li>hello?</li>
   <div></div>
   <li>hello</li>
   <div></div>
   <li>hi</li>
   <div></div>
   <li>hehe</li>
   <div></div>
   <li>goodbye</li>
   <div></div>
   <li>。。。。</li>
   <div></div>
   <li>sdfasdsadfd fasd fasd fasdfasdfasdf</li>
   <div></div>
   <li> 哈哈</li>
   <div></div>
  </ul>
  <textarea id="msg_input"></textarea>
  <button id="sendbtn">发送</button>
 </div>
</body>
</html>

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

最新资讯
破天荒!苹果要在Twitter直播新品发布会

破天荒!苹果要在Twitte

苹果多年来一直是采取直播来发布新产品,但是之前都是在
游戏化、心流与推荐算法到底厉害在哪里?

游戏化、心流与推荐算

Gamification这个概念在近年的产品领域是一个相当热门
新iPhone发布之前 iPhone 7是目前最常见的苹果机型

新iPhone发布之前 iPh

国外一家机构发布的数据显示,目前iPhone 7是最常见的iP
发布前的最后盘点:新iPhone的杀手锏究竟是什么?

发布前的最后盘点:新iP

“双卡双待好,生活一个号,工作一个号,生活工作两不误。”
爱笑的丁磊运气不会太差,那网易游戏呢?

爱笑的丁磊运气不会太

从某种意义上来说,丁磊后来在网络游戏上的成功也是一种
互联网听歌二十年

互联网听歌二十年

互联网如何改变我们听歌的方式。
最新文章
详解NodeJs开发微信公众号

详解NodeJs开发微信公

本篇文章给大家分享了NodeJs开发微信公众号的相关技术
详解webpack4多入口、多页面项目构建案例

详解webpack4多入口、

这篇文章主要介绍了详解webpack4多入口、多页面项目构
Vue仿支付宝支付功能

Vue仿支付宝支付功能

这篇文章主要介绍了Vue仿支付宝支付功能,非常不错,具有
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

jquery ajaxfileuplod

点击一次上传, 当上传操作结束后才能操作界面,实现方式
JavaScript继承与多继承实例分析

JavaScript继承与多继

这篇文章主要介绍了JavaScript继承与多继承,结合实例
使用javascript做在线算法编程

使用javascript做在线

这篇文章主要介绍了使用javascript做在线算法编程的相