Maison > Article > interface Web > Tutoriel sur la création d'une boîte de dialogue simple avec js

Tutoriel sur la création d'une boîte de dialogue simple avec js

巴扎黑original: 2017-08-18 10:33:072683parcourir

Cet article présente principalement en détail l'implémentation d'une boîte de dialogue de chat simple dans js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec tout le monde l'implémentation d'un chat simple. en js. Le code spécifique de la boîte de dialogue est pour votre référence. Le contenu spécifique est le suivant

<!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(&#39;msg_input&#39;);//查找缓存
  document.getElementById(&#39;sendbtn&#39;).onclick=function () {
   //var input1 = document.getElementById(&#39;msg_input&#39;);//
   //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(&#39;msg_input&#39;);//查找缓存
   var ul = document.getElementById(&#39;content&#39;);

   var newLi = document.createElement(&#39;li&#39;);
   newLi.innerHTML = input.value;
   newLi.className = &#39;msgContent right&#39;;
   ul.appendChild(newLi);

   var p = document.createElement(&#39;p&#39;);
   p.style = &#39;clear:both&#39;;
   ul.appendChild(p);




   ajax({
    url:&#39;http://jisuznwd.market.alicloudapi.com/iqa/query?question=&#39;+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 = &#39;温度:&#39;+zhengzhou.day_air_temperature+&#39;,&#39;+zhengzhou.day_weather;
     console.log(tmp)

     var newLi = document.createElement(&#39;li&#39;);
     newLi.innerHTML = tmp;
     newLi.className = &#39;msgContent left&#39;;
     ul.appendChild(newLi);

     var p = document.createElement(&#39;p&#39;);
     p.style = &#39;clear:both&#39;;
     ul.appendChild(p);
     input.value = &#39;&#39;;
     newLi.scrollIntoView();//将元素滚动到可见位置
    }
   })

   input.value = &#39;&#39;;
   newLi.scrollIntoView();//将元素滚动到可见位置
  }

 }



 function ajax(obj) {
  //?lastCursor=6610&pageSize=10
//   var url = &#39;reg.php&#39;;
  var xhr = null;
  if(window.ActiveXObject){
   xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)
  }else{
   xhr = new XMLHttpRequest();
  }
//  $username = $_REQUEST[&#39;username&#39;];
//  $password = $_REQUEST[&#39;password&#39;];

  //打开与服务器的连接
  if(obj.method){
   xhr.open(obj.method,obj.url,true);
  }else{
   xhr.open(&#39;get&#39;,obj.url,true);
  }
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xhr.setRequestHeader("Authorization","APPCODE 3e9dfb924f464e9593a95f9d2bbf4348")


  // {username:&#39;zhangsa&#39;,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(&#39;请求成功&#39;,xhr.responseText)
     if(obj.success){
      obj.success(xhr.responseText)
     }

    }else{
//      console.log(xhr.status,&#39;请求出错&#39;)
     if(obj.failure){
      obj.failure(&#39;请求失败&#39;)
     }
    }
   }
  }
//   var sendData = &#39;username=zhangsan&password=123456&#39;;
  if( obj.method == undefined ||obj.method.toLowerCase() ==&#39;get&#39;){
   xhr.send(null);//
  }else{
   xhr.send(obj.params);//

  }
 }


</script>

</head>

<body>
 <p id="main" class="main">
  <ul id="content" class="content">
   <li class="msgContent left">hello?</li>
   <p style="clear:both"></p>
   <li class="msgContent left">hello</li>
   <p style="clear:both"></p>
   <li class="msgContent right">hi</li>
   <p style="clear:both"></p>
   <li class="msgContent left">hehe</li>
   <p style="clear:both"></p>
   <li class="msgContent left">goodbye</li>
   <p style="clear:both"></p>
   <li class="msgContent right">。。。。</li>
   <p style="clear:both"></p>
   <li class="msgContent right">sdfasdsadfd fasd fasd fasdfasdfasdf</li>
   <p style="clear:both"></p>
   <li class="msgContent right"> 哈哈</li>
   <p style="clear:both"></p>
  </ul>
  <textarea id="msg_input" class="msgInput"></textarea>
  <button id="sendbtn" class="sendbtn">发送</button>
 </p>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Solution parfaite à l'échec du changement d'onglet BootStrapArticle suivant：Solution parfaite à l'échec du changement d'onglet BootStrap

Articles Liés

Voir plus