JS代码实现的聊天框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑' } #container1 { width: 450px; height: 780px; background: #eee; position: relative; box-shadow: 20px 20px 55px #777; } .header { background: #000; height: 40px; color: #fff; line-height: 34px; font-size: 20px; padding: 0 10px; } .footer { width: 430px; height: 50px; background: #666; position: absolute; bottom: 0; padding: 10px; } .footer input { width: 275px; height: 45px; outline: none; font-size: 20px; text-indent: 10px; position: absolute; border-radius: 6px; right: 80px; } .footer span { display: inline-block; width: 62px; height: 48px; background: #ccc; font-weight: 900; line-height: 45px; cursor: pointer; text-align: center; position: absolute; right: 10px; border-radius: 6px; } .footer span:hover { color: #fff; background: #999; } #user_face_icon { display: inline-block; background: red; width: 60px; height: 60px; border-radius: 30px; position: absolute; bottom: 6px; left: 14px; cursor: pointer; overflow: hidden; } img { width: 60px; height: 60px; } .content { font-size: 20px; width: 435px; height: 662px; overflow: auto; padding: 5px; } .content li { margin-top: 10px; padding-left: 10px; width: 412px; display: block; clear: both; overflow: hidden; } .content li img { float: left; } .content li span{ background: #7cfc00; padding: 10px; border-radius: 10px; float: left; margin: 6px 10px 0 10px; max-width: 310px; border: 1px solid #ccc; box-shadow: 0 0 3px #ccc; } .content li img.imgleft { float: left; } .content li img.imgright { float: right; } .content li span.spanleft { float: left; background: #fff; } .content li span.spanright { float: right; background: #7cfc00; } </style> <script> window.onload = function(){ var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png']; var num = 0; //控制头像改变 var iNow = -1; //用来累加改变左右浮动 var icon = document.getElementById('user_face_icon').getElementsByTagName('img'); var btn = document.getElementById('btn'); var text = document.getElementById('text'); var content = document.getElementsByTagName('ul')[0]; var img = content.getElementsByTagName('img'); var span = content.getElementsByTagName('span'); icon[0].onclick = function(){ if(num==0){ this.src = arrIcon[1]; num = 1; }else if(num==1){ this.src = arrIcon[0]; num = 0; } } btn.onclick = function(){ if(text.value ==''){ alert('不能发送空消息'); }else { content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>'; iNow++; if(num==0){ img[iNow].className += 'imgright'; span[iNow].className += 'spanright'; }else { img[iNow].className += 'imgleft'; span[iNow].className += 'spanleft'; } text.value = ''; // 内容过多时,将滚动条放置到最底端 contentcontent.scrollTop=content.scrollHeight; } } } </script> </head> <body> <div id="container1"> <div class="header"> </div> <ul class="content"> </ul> <div class="footer"> <div id="user_face_icon"> <img src="http://www.xttblog.com/icons/favicon.ico" alt=""> </div> <input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div> </div> </body> </html>
JS代码实现的聊天框的更多相关文章
- 只用js 实现的简约聊天框
之前看到别人的网页打开后都有个聊天框,可以与同时在网上的网友聊点简单话题,于是便找了个最简单的方法 使用js,客户端 打开页面,不断的给服务器发送请求来得到 新的消息 用JavaScript实现的轮询 ...
- 同步文本框内容的JS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 怎么用js代码改变单选框的选中状态
今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...
- 单选复选框的js代码取值
单选框 复选框选中后的js代码处理 <script type="text/javascript"> function check(){ document.getElem ...
- 判断小数点位数不超过2位的JS代码和在删除确认框里面插JS代码
<script type="text/javascript"> function checkDecimals(){ var decallowed = 2; var re ...
- UWP开发之控件:用WebView做聊天框
目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...
- JS简单仿QQ聊天工具的制作
刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
随机推荐
- *HDU1848 博弈
Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- Unity自动寻路Navmesh之高级
隔离层自动生成寻路网格 (源码scene1.unity) 1.创建Plane实例P1,P2,两者之间出现一条鸿沟.直接控制角色位移是无法通过的. 2.打开Navigation窗口,分别选中P1,P2, ...
- #iOS问题记录#动态Html加载本地CSS和JS文件
所谓动态Html,指代码中组合生成的html字符串: 若需要加载本地CSS,图片,JS文件,则, 1,需要文件的全路径: 2,需要"file:///"标志: 例如: //获取文件全 ...
- 太极旋转-JS实现
刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-to ...
- spring的代理模式
静态代理: 首先定义一个接口,随便写一个方法 定义2个实现接口的方法 (被代理的对象) (代理对象) 需要将接口 定义get set 方法 代理增强的方法 然后实现 输出结果如下: 动态代理(jdk动 ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
- SQL Server2016 原生支持JSON
SQL Server2016 原生支持JSON SQL Server 2005 开始支持 XML 数据类型,提供原生的 XML数据类型.XML 索引以及各种管理 XML 或输出 XML 格式的函数. ...
- TODO:Ubuntu下安装Node
TODO:Ubuntu下安装Node Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高 ...
- FreeBSD_11-系统管理——{Part_8 - IPFW}
内核支持 方式一:静态編译进内核 options IPFIREWALL # enables IPFW options IPFIREWALL_VERBOSE # enables logging for ...
- SSIS的 Data Flow 和 Control Flow
Control Flow 和 Data Flow,是SSIS Design中主要用到的两个Tab,理解这两个Tab的作用,对设计更高效的package十分重要. 一,Control Flow 在Con ...