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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
Javascript原型链及instanceof原理详解
May 25 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python如何更新包
2020/06/11 Python
通过cmd进入python的步骤
2020/06/16 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
函授大专自我鉴定
2013/11/01 职场文书
商务经理岗位职责
2014/07/30 职场文书
建设工程授权委托书
2014/09/22 职场文书
政协委员个人总结
2015/03/03 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python