search

Home >Web Front-end >JS Tutorial >Tutorial on making a simple dialog box with js

Tutorial on making a simple dialog box with js

巴扎黑
巴扎黑Original
2017-08-18 10:33:072763browse

This article mainly introduces the implementation of simple chat dialog box in js in detail, which has certain reference value. Interested friends can refer to it

The example in this article shares with everyone the implementation of simple chat in js The specific code of the dialog box is for your reference. The specific content is as follows


<!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>

The above is the detailed content of Tutorial on making a simple dialog box with js. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Perfect solution to BootStrap tab switching failureNext article：Perfect solution to BootStrap tab switching failure

Related articles

See more