Maison > interface Web > js tutoriel > 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

巴扎黑
Libérer: 2017-08-18 10:33:07
original
2760 Les gens l'ont consulté

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>
Copier après la connexion
.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal