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 ...

随机推荐

html css 样式继承的问题
body 设置css中可以继承的属性:letter-spacing.word-spacing.white-space.line-height.color.font等但有时,body的样式,不能在有的 ...
php_cz
post.php <?php require_once 'config.php'; $ddh=trim(htmlspecialchars($_POST['ddh'])); //支付宝交易号 $m ...
模拟jquery的$()选择器的实现
<html> <head> </head> <body> <div id="div1">div1</div> ...
dock-compose 安装
apt-get install python-pip python-dev pip install -U docker-composechmod +x /usr/local/bin/docker-co ...
Redhat 一则关于路由及DNS配置的实例
安装了Redhat 7.2, 配置路由, 但发现路由重启之后,不能生效. 配置路由: touch /etc/sysconfig/static-router, 然后编辑路由信息如下. any defau ...
web应用程序开发原理
企业应用计算的演变为1.主机/哑终端的集中计算模式: 2.客户机/服务器计算模式:3.浏览器 /服务器计算模式.其中,1具有部署方面的优势,但在一台计算机中进行全部的处理,应用程序难于维护,难于 ...
C#中Object和Json之间的转换
//创建一个类,此类有两个方法 using Newtonsoft.Json;namespace System{ public static class JsonExtension { ...
在eclipse中使用正则表达式进行搜素
Sql Server中暂停命令
Sql Server中暂停几秒再执行后面的命令! -- 语法WAITFOR { DELAY 'time_to_pass' | TIME 'time_to_execute' | [ ( r ...
MQTT——服务器搭建（一）
MQTT介绍 MQTT,是IBM推出的一种针对移动终端设备的基于TCP/IP的发布/预订协议,可以连接大量的远程传感器和控制设备: 轻量级的消息订阅和发布(publish/subscribe)协议建 ...

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

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

随机推荐

热门专题