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> /// 平台角色 /// </ ...
随机推荐
- input框focus时的美化效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- 【转】Web测试方法
看到好文章,拿过来给大家分享分享! 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&am ...
- sql SYS对象集合
select * from SYS.objects select * from SYS.all_objects select * from SYS.tables select * from SYS.c ...
- 最近碰到的一些 SSL 问题记录
最近碰到一些 SSL 的小问题,特记录下. 我们有个 Java 实现的 SSL TCP 服务端,为客户端(PC.Android 和 iOS)提供 SSL 接入连接服务.最近有用户反馈其手机上 App ...
- 理解C# 4 dynamic(3) – DynamicObject的使用
上篇文章"理解C# 4 dynamic(2) – ExpandoObject的使用" 了解了ExpandoObject的基本使用. 但ExpandoObject的问题就是它是一个万 ...
- Python黑帽编程 3.2 ARP监控
Python黑帽编程 3.2 ARP监控 在第3.1节<ARP欺骗>中,我们学习了ARP的基本原理,使用Python实现了我们自己的ARP欺骗工具.在上一节的基础上,我们来实现一个ARP监 ...
- OracleConnection is obsolete
用EF搞Oracle的 fake CodeFirst 时,一直报错以下错误: 对类型“System.Data.OracleClient.OracleConnection”的存储区提供程序实例调用“ge ...
- Latch2:Latch和性能
1,数据的IO操作 SQL Server访问的任何一个Page必须存在于内存中,如果不存在于内存中,那么SQL Server发出 Disk IO请求,将数据页从Disk读取到内存中,然后SQL Ser ...
- UpdateException-更新条目时出错分析
不屁话1张图搞定: 我是这个错: 2015-03-27 00:25:00,493 [9] ERROR log - System.Data.Entity.Infrastructure.DbUpdateE ...