首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

js实现简易聊天对话框

- Author -

凉介v7

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
jQuery UI实现动画效果代码分享
Aug 19 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
马耳他购物网站(1) PHP面试题(54) 希腊购物网站(6) 冰岛购物网站(1) 约旦购物网站(1) 乌克兰购物网站(27) 罗马尼亚购物网站(10) 白俄罗斯购物网站(3) 保加利亚购物网站(3) 哈萨克斯坦购物网站(2)
You might like
php入门教程 精简版
2009/12/13 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
IE 条件注释详解总结（附实例代码）
2009/08/29 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
微信小程序实现红包功能（后端PHP实现逻辑）
2018/07/11 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
中国梦的演讲稿
2014/01/08 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
技术合作协议书范本
2014/04/18 职场文书
暑假生活随笔
2015/08/15 职场文书
生日寿星公答谢词
2015/09/29 职场文书
素质教育培训心得体会
2016/01/19 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python