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 相关文章推荐
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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
10条php编程小技巧
2015/07/07 PHP
PHP安全下载文件的方法
2016/04/07 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
python连接mysql并提交mysql事务示例
2014/03/05 Python
python刷投票的脚本实现代码
2014/11/08 Python
分享Python字符串关键点
2015/12/13 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python实现静态服务器
2019/09/05 Python
Python hmac模块使用实例解析
2019/12/24 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
用python实现一个简单的验证码
2020/12/09 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
公司委托书格式
2014/08/01 职场文书
行政二审代理词
2015/05/25 职场文书
村主任当选感言
2015/08/01 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python