把聊天室的界面先做好，主代码（现在还只能单机模式・_・）：

   window.onload = function(){

            var arrIcon = ['http://tva1.sinaimg.cn/crop.0.0.540.540.180/006fKk88jw8f54ate3l02j30f00qodhh.jpg','http://tva1.sinaimg.cn/crop.0.0.540.540.180/006fKk88jw8f54ate3l02j30f00qodhh.jpg'];

			//控制头像改变

            var num = 0;

			//用来累加改变左右浮动

            var iNow = -1;

            var icon = document.getElementById('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 = '';

                }

            }

        }

编辑内容，点击发送可以发送消息：\(^o^)/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript之聊天室设计模拟</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-family: '微软雅黑'
}
#container {
width: 450px;
height: 780px;
background: #eee;
margin: 80px auto 0;
position: relative;
box-shadow: 20px 20px 55px #777;
}
.header {
background: #000;
height: 34px;
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;
}
#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://tva1.sinaimg.cn/crop.0.0.540.540.180/006fKk88jw8f54ate3l02j30f00qodhh.jpg','http://tva1.sinaimg.cn/crop.0.0.540.540.180/006fKk88jw8f54ate3l02j30f00qodhh.jpg'];
//控制头像改变
var num = 0;
//用来累加改变左右浮动
var iNow = -1;
var icon = document.getElementById('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 = '';
}
}
}
</script>
</head>
<body>
<div id="container">
<div class="header">
<span style="float: left;">冷的锋刃-博客园</span>
<span style="float: right;"><div id="名称">
<script language=Javascript>
var now=new Date()
document.write(1900+now.getYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds())
</script>
</div> </span>
</div>
<ul class="content"></ul>
<div class="footer">
<div id="icon">
<img src="http://tva1.sinaimg.cn/crop.0.0.540.540.180/006fKk88jw8f54ate3l02j30f00qodhh.jpg" alt="">
</div>
<input id="text" type="text" placeholder="说点什么吧...">
<span id="btn">发送</span>
</div>
</div>
</body>
</html>

功能尚未完整，未完待续……

JavaScript之聊天室设计摸拟的更多相关文章

  1. javascript之聊天室（单机）来自于冷的锋刃

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

  2. Android之聊天室设计与开发

    我们要设计和实现一个有聊天室功能的APP,需要服务器不断读取来自客户端的信息,并即时地将信息发送给每个连接到本服务器上的客户端,每个客户端可以向服务器发送消息,并不断地接收来自服务器的消息,并将消息显 ...

  3. 用Servlet实现聊天室设计

    实验一   Servlet编程 一.实验目的 1.熟悉Java EE编程环境JDK和NetBeans的安装,配置和使用: 2.掌握Servlet的编写及部署: 3.掌握Servlet的工作原理和编程接 ...

  4. [置顶] Chat Room：基于JAVA Socket的聊天室设计

    d0304 更新功能实现 d0312 更新部分图片&UI设计部分 d0318 更新功能实现 d1222 实现添加好友功能.实现注册功能.修改大量BUG github:https://githu ...

  5. SignalR实现在线聊天室功能

    一.在线聊天室 1.新建解决方案 SignalROnlineChatDemo 2.新建MVC项目 SignalROnlineChatDemo.Web (无身份验证) 3.安装SignalR PM> ...

  6. NIO 多人聊天室

    一前言 在家休息没事,敲敲代码,用NIO写个简易的仿真聊天室.下面直接讲聊天室设计和编码.对NIO不了解的朋友,推荐一个博客,里面写的很棒: https://javadoop.com/     里面有 ...

  7. 在线聊天室的实现(1)--websocket协议和javascript版的api

    前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...

  8. Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

    思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望 为更好的 ...

  9. h2engine游戏服务器设计之聊天室示例

    游戏服务器设计之聊天室示例 简介 h2engine引擎建群以后,有热心网友向我反馈,想尝试h2engine但是没有服务器开发经验觉得无从入手,希望我能提供一个简单明了的示例.由于前一段时间工作实在忙碌 ...

随机推荐

  1. 【转】工科男IT职场求生法则

    转自:http://www.36dsj.com/archives/3459 我在IT职场打滚超过10年了,从小小的程序员做到常务副总.相对于其它行业,IT职场应该算比较光明的了,但也陷阱重重,本文说说 ...

  2. 企业应用架构模式阅读笔记 - Martin Fowler

    1. 数据读取

  3. Codeforces Round #309 (Div. 1) C. Love Triangles dfs

    C. Love Triangles Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/553/pro ...

  4. 安卓 SQLite数据库操作实例

    前段时间写了个安卓平台下SQLite数据库操作的实例 ,一直没得时间总结 ,今天把它弄出来了. 在Android 运行时环境包含了完整的 SQLite. 首先介绍一下SQLite这个数据库: SQLi ...

  5. HTML之一 符号实体

    符号实体和”语言代码“以及”字符集“无关.

  6. 浏览器中打开IOS应用并传参

    原创文章,转载请注明 开发中遇到这么一个问题,就是动态地指定联接服务器地址,或其它数据.如果是其它数据还好说一些,可以通过在服务器上获得的方式来弄.但如果服务器地址都需要动态指定的话.那就得另想办法了 ...

  7. [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

    In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...

  8. IIS问题汇总

    1.问题描述   VS和Framework的安装顺序不对导致网站打不开   原因分析   Framework出现问题   解决办法   重新注册Framework版本   a.开始->运行-&g ...

  9. ThinkPHP中pathinfo模式与URL重写

    Thinkphp中的pathinfo模式 http://serverName/appName/module/action/id/1/ pathinfo模式 在不考虑路由的情况下,第一个参数会被解析成模 ...

  10. Makefile 中会在多处地方看到 FORCE

    转载:http://blog.csdn.net/wzw88486969/article/details/11739737 在内核的 Makefile 中会在多处地方看到 FORCE ,比如: # vm ...