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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
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
相对路径转化成绝对路径
2007/04/10 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
python函数的5种参数详解
2017/02/24 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python cumsum函数的具体使用
2019/07/29 Python
使用pandas读取文件的实现
2019/07/31 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技