js实现简易聊天对话框


Posted in Javascript onAugust 17, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 #Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 #Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 #Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 #Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 #Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 #Javascript
Javascript中的getter和setter初识
Aug 17 #Javascript
You might like
PHP时间和日期函数详解
2015/05/08 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
物流专业大学应届生求职信
2013/11/03 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
业务员的岗位职责
2014/03/15 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
爱国主义演讲稿
2014/05/07 职场文书
学校募捐倡议书
2014/05/14 职场文书
化学教育专业求职信
2014/07/08 职场文书
建筑结构施工求职信
2014/07/11 职场文书
上课说话检讨书500字
2014/11/01 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
Python利用capstone实现反汇编
2022/04/06 Python