js实现聊天对话框


Posted in Javascript onFebruary 08, 2020

本文实例为大家分享了js实现聊天对话框的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 .box{
 width:300px;
 height:400px;
 border:1px solid blue;
 margin:0 auto;
 }
 .inTer{
 width:280px;
 height:280px;
 border:1px solid deeppink;
 margin:0 auto;
 margin-top:10px;
 overflow-y:auto;
 }
 textarea{
 display:block;
 width: 276px;
 height:65px;
 margin:0 auto;
 margin-top:5px;
 }
 #btn{
 display:block;
 float:right;
 margin-right:10px;
 margin-top:5px;
 }
 p{
 display:inline-block;
 border-radius:5px;
 background:#dcdcdc;
 font-size:12px;
 padding:5px 5px;
 margin:5px 0;
 margin-left:5px;
 max-width:140px;
 word-wrap: break-word;
 }
 </style>
 </head>
 <body>
 <div class="box">
 <div class="inTer" id="father">
 <p>你好</p ></br>
 <p>你好</p ></br>
 <p>你好</p ></br>
 <p>heiheiheiheiehieheieheieheieheiheiehe</p ></br>
 </div>
 <textarea style="resize: none;" id="txt">
 </textarea>
 <input type="button" id="btn" value="发送" />
 </div>
 </body>
</html>
<script>
 var btn = document.getElementById("btn");
 var txt = document.getElementById("txt");
 var father = document.getElementById("father")
 var p = document.getElementsByTagName("p");
 btn.onclick=function(){
 if(txt.value==""){
 alert("请勿发送空内容");
 }
 else{
 var son = document.createElement("p");
 son.style.backgroundColor="yellowgreen";
 son.style.clear="both";
 son.style.float="right";
 son.style.marginRight="5px";
 son.innerText=txt.value;
 father.appendChild(son);
 txt.value="";
 son.scrollIntoView();
 }
 
 }
 document.onkeydown=function(evt){
 var e = evt || event;
 e.keyCode=e.which=e.charCode;
 if(e.keyCode==13 || e.keyCode==10){
 if(txt.value==""){
 alert("请勿发送空内容");
 }
 else{
 var son = document.createElement("p");
 son.style.backgroundColor="yellowgreen";
 son.style.clear="both";
 son.style.float="right";
 son.style.marginRight="5px";
 son.innerText=txt.value;
 father.appendChild(son);
 txt.value="";
 son.scrollIntoView();
 }
 }
 }
 </script>

js实现聊天对话框

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

Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
微信小程序实现animation动画
Jan 26 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
js实现踩五彩块游戏
Feb 08 #Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 #Javascript
JS实现简易留言板增删功能
Feb 08 #Javascript
原生JS实现留言板功能
Feb 08 #Javascript
javascript实现留言板功能
Feb 08 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php中动态修改ini配置
2014/10/14 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php常见的魔术方法详解
2014/12/25 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
django框架自定义用户表操作示例
2018/08/07 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
采购主管岗位职责
2014/02/01 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
建议书标准格式
2014/03/12 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
运动会主持人开幕词
2016/03/04 职场文书
Docker下安装Oracle19c
2022/04/13 Servers