js实现简易聊天对话框
时间:2019-03-31
本文章向大家介绍js实现简易聊天对话框,主要包括js实现简易聊天对话框使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 第一个IronPython程序(之一)
- mono-3.4.0 源码安装时出现的问题 [do-install] Error 2 [install-pcl-targets] Error 1 解决方法
- 安装 IronPython
- Python 项目实践三(Web应用程序)第一篇
- Centos 7.0 安装Mono 3.4 和 Jexus 5.6
- 第一个IronPython程序(之二)
- Python 项目实践二(下载数据)第四篇
- Python 项目实践二(下载数据)第三篇
- 体验扁平化的WordPress 后台管理界面
- Python 项目实践二(生成数据)第二篇
- 重新审视SqlDataReader的使用
- Python 项目实践二(生成数据)第一篇
- 删除 WordPress 导航菜单的多余 CSS 选择器
- 删除 WordPress 导航菜单的多余 CSS 选择器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Tornado模板对空白字符的处理与解决方案
- View的有效曝光监控(上)|RecyclerView 篇
- PHP绕过open_basedir列目录的研究
- View的有效曝光监控(下)|ScrollView NestScrollView篇
- 聊聊AbstractProcessor和Java编译流程
- Okhttp如何开启的Http2.0
- PHP Execute Command Bypass Disable_functions
- 聊聊Android编译流程
- Android组件化问题思考
- 最近面试碰到的两道算法题|面试相关
- Thread也会OOM吗?
- RoundCube Webmail邮件正文存储型XSS(CVE-2015-1433)
- 再谈Android Lint
- Android DiffUtil 封装|深拷贝
- [CVE-2014-8959] phpmyadmin任意文件包含漏洞分析