<!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代码实现的聊天框的更多相关文章

  1. 只用js 实现的简约聊天框

    之前看到别人的网页打开后都有个聊天框,可以与同时在网上的网友聊点简单话题,于是便找了个最简单的方法 使用js,客户端 打开页面,不断的给服务器发送请求来得到 新的消息 用JavaScript实现的轮询 ...

  2. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 怎么用js代码改变单选框的选中状态

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...

  4. 单选复选框的js代码取值

    单选框 复选框选中后的js代码处理 <script type="text/javascript"> function check(){ document.getElem ...

  5. 判断小数点位数不超过2位的JS代码和在删除确认框里面插JS代码

    <script type="text/javascript"> function checkDecimals(){ var decallowed = 2; var re ...

  6. UWP开发之控件：用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  7. JS简单仿QQ聊天工具的制作

    刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...

  8. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  9. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

随机推荐

  1. input框focus时的美化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  3. 【转】Web测试方法

    看到好文章,拿过来给大家分享分享! 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#￥%……&*?[]{}”特别要注意单引号和&am ...

  4. sql SYS对象集合

    select * from SYS.objects select * from SYS.all_objects select * from SYS.tables select * from SYS.c ...

  5. 最近碰到的一些 SSL 问题记录

    最近碰到一些 SSL 的小问题,特记录下. 我们有个 Java 实现的 SSL TCP 服务端,为客户端(PC.Android 和 iOS)提供 SSL 接入连接服务.最近有用户反馈其手机上 App ...

  6. 理解C# 4 dynamic(3) – DynamicObject的使用

    上篇文章"理解C# 4 dynamic(2) – ExpandoObject的使用" 了解了ExpandoObject的基本使用. 但ExpandoObject的问题就是它是一个万 ...

  7. Python黑帽编程 3.2 ARP监控

    Python黑帽编程 3.2 ARP监控 在第3.1节<ARP欺骗>中,我们学习了ARP的基本原理,使用Python实现了我们自己的ARP欺骗工具.在上一节的基础上,我们来实现一个ARP监 ...

  8. OracleConnection is obsolete

    用EF搞Oracle的 fake CodeFirst 时,一直报错以下错误: 对类型“System.Data.OracleClient.OracleConnection”的存储区提供程序实例调用“ge ...

  9. Latch2：Latch和性能

    1,数据的IO操作 SQL Server访问的任何一个Page必须存在于内存中,如果不存在于内存中,那么SQL Server发出 Disk IO请求,将数据页从Disk读取到内存中,然后SQL Ser ...

  10. UpdateException-更新条目时出错分析

    不屁话1张图搞定: 我是这个错: 2015-03-27 00:25:00,493 [9] ERROR log - System.Data.Entity.Infrastructure.DbUpdateE ...