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 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
JavaScript实现登录窗体
Jun 22 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
header跳转和include包含问题详解
2012/09/08 PHP
php-fpm中max_children的配置
2019/03/15 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
js日期联动示例
2014/05/02 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Python count函数使用方法实例解析
2020/03/23 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
残疾人创业典型事迹
2014/02/01 职场文书
我的小天地教学反思
2014/04/30 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
优秀团队申报材料
2014/12/26 职场文书
525心理健康活动总结
2015/05/08 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL