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

<!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之聊天室（单机）来自于冷的锋刃的更多相关文章

JavaScript之聊天室设计摸拟
把聊天室的界面先做好,主代码(现在还只能单机模式・_・): window.onload = function(){ var arrIcon = ['http://tva1.sinaimg.cn/cro ...
SignalR实现在线聊天室功能
一.在线聊天室 1.新建解决方案 SignalROnlineChatDemo 2.新建MVC项目 SignalROnlineChatDemo.Web (无身份验证) 3.安装SignalR PM> ...
在线聊天室的实现(1)--websocket协议和javascript版的api
前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...
Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室
思路消息显示区发消息板块消息显示消息发送优化显示非重复性的数据优化显示加上滚动条每次都显示最新消息完整代码前端代码数据库表结构服务器端代码总结与展望总结展望为更好的 ...
使用WebRTC搭建前端视频聊天室——信令篇
博客原文地址建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室——入门篇如果需要搭建实例的话可以参照SkyRTC-demo:github地址其中使用了两个库:SkyRTC(github地址 ...
Asp.NET MVC 使用 SignalR 实现推送功能一（Hubs 在线聊天室）
简介 ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端 ...
Socket.IO聊天室~简单实用
小编心语:大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐!!这一次要分享的东西小编也不是很懂啊,总之小编把它拿出来是觉地比较稀奇,而且程序也没有那么难,是一个比较简单的程序,大家可以多多试试~ ...
利用html 5 websocket做个山寨版web聊天室(手写C#服务器)
在之前的博客中提到过看到html5 的websocket后很感兴趣,终于可以摆脱长轮询(websocket之前的实现方式可以看看Developer Works上的一篇文章,有简单提到,同时也说了web ...
JavaWeb网页聊天室（WebSocket即时通讯）
原文:http://baike.xsoftlab.net/view/656.html Git地址 http://git.oschina.net/loopcc/WebSocketChat 概要: Web ...

随机推荐

好看的IDE配色方案让代码看起来不再那么凶猛了
写这篇小文的初衷是,笔者是原教旨主义者,一直坚持用IDE默认的配色方案.另外也觉得网上黑色系的配色方案太过bling bling了.但今天尝试用新的配色方案后,兴奋地发现对代码的好感度大幅提升. 嗯, ...
Sping
Python开发【前端】：JavaScript
JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
python pip安装问题
scipy-0.18.1-cp34-cp34m-win32.whl is not a supported wheel on this platform. 遇到该问题需要更新pip版本 1.更新pip: ...
javascript 逻辑操作符
JS按位与(&) 0001 & 0011 --- 0001 只有两个数的值为1时,才返回1 JS按位异或 (^) 0101 (expression1) 1100 (expressi ...
Unity 编译apk启动出异常
问题:unity 编译出来的apk,在android安装启动,时报以下错误: 07-06 20:52:48.282: E/linker(18229): load_library(linker.cpp: ...
Lua屏蔽对象方法和恢复的方法
背景对于OO思想实现的类, 对于某些场景需要屏蔽某些方法, 不让调用.过了这段场景, 就恢复这些类的方法, 可以调用. 例如: 工厂具有开工方法, 但是在晚上不允许开工, 所有在晚上这段时间, 见开 ...
一些有意思的VR设备介绍
1.计算机(Computers) 不久以前,一个VR系统需要百万美元的超级计算机:而如今顶级的VR系统正在使用桌面便携式计算机簇,极大的降低了价格和维护成本. 2.跟踪器(Tracking) 为了能与 ...
JavaScriptSerializer使用条件
JavaScriptSerializer使用条件:需先引用组件:System.Web.Extensions 类全称:System.Web.Script.Serialization.JavaScript ...
屌丝程序员的梦想 (二) 屌丝IT梦开始地方
校区的周围有很多的网吧,一个对电子游戏迷恋了许久的青少年来说,那绝对是不可不去的地方,键盘,鼠标,显示器,那一切看起来都那么完美,那么似曾相识,是啊,魂牵梦绕的IT梦...哦..当时那只是电子游戏梦. ...

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

javascript之聊天室（单机）来自于冷的锋刃的更多相关文章

随机推荐

热门专题