这篇文章主要为大家详细介绍了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>

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

最新资讯
傅盛:与焦虑共生,更以焦虑反抗平庸

傅盛:与焦虑共生,更以焦

2008年,刚满30岁的傅盛离职,张颖看到这个消息,要来电话打
快手收购A站进军二次元,七亿老铁能容得下百万猴子吗?

快手收购A站进军二次

百万“猴子”终于有了新归宿,不是马云爸爸,不是“不站队
苹果WWDC大会发布了什么创新的功能?并没有

苹果WWDC大会发布了什

一场发布会的精彩程度,和演讲者说“isn't that cool”
为什么苹果CEO库克力捧这个10岁小程序员?

为什么苹果CEO库克力

这个有点臭屁、却笑的很腼腆的小孩,用了四年走完了别人
苹果发布新App Store规则:或针对Steam游戏平台

苹果发布新App Store

在拒绝了Steam的iPhone端应用之后,苹果于本周一发布了
拼多多不再低价?至少纸巾品类上是这样

拼多多不再低价?至少纸

以低价起家的拼多多,有望逐渐走出价格洼地。
最新文章
JS动画定时器知识总结

JS动画定时器知识总结

这篇文章给大家总结了关于JS动画中定时器的相关用法以
vue利用axios来完成数据的交互

vue利用axios来完成数

这篇文章主要介绍了vue利用axios来完成数据的交互,本
剖析Angular Component的源码示例

剖析Angular Componen

本篇文章主要介绍了剖析Angular Component的源码示例,
JS中原始值和引用值的储存方式示例详解

JS中原始值和引用值的

原始值指的是代表原始数据类型的值,也叫基本数据类型,引
JavaScript 五大常见函数

JavaScript 五大常见

在javascript前端开发中js函数问题经常会被讨论,这个问
Angular学习笔记之集成三方UI框架、控件的示例

Angular学习笔记之集

这篇文章主要介绍了Angular学习笔记之集成三方UI框架