Web编程练习

最新推荐文章于 2022-11-09 15:41:11 发布

嘻嘻嘻嘻嘻嘻啊

最新推荐文章于 2022-11-09 15:41:11 发布

阅读量868

点赞数

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/weixin_41460135/article/details/98206842

Web 专栏收录该内容

6 篇文章

订阅专栏

本文涵盖HTML、CSS、JavaScript基础知识，解析title与alt属性区别，介绍块级与行内元素，深入CSS盒模型，探讨JS数据类型及类的实现，详解DOM操作方法，并通过导航栏、图片列表、淘宝主页等项目实例，提升Web编程技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- Web编程练习

Web编程练习

一、简答题

1. html 中 title 属性和 alt 属性的区别?

title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。
title可以提供非本质的额外信息。例如为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的；或者为图像提供额外的说明信息，比如日期或者其他非本质的信息。
alt属性只能用在img、area和input元素中（包括applet元素）。
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。

2. 请说出几个常用的块级元素和行内元素.

块级元素：div -最常用的块级元素
dl - 和dt dd搭配使用的块级元素
form - 交互表单
h1 - 大标题
hr - 水平分隔线
ol - 排序表单
p - 段落
ul - 非排序列表
行内元素：
a - 锚点
b - 粗体(不)
br - 换行
em - 强调
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
span - 常用内联容器，定义文本内区块
u - 下划线

3. 介绍一下 CSS 的盒子模型?

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距Margin，边框Border，Padding内边距，和实际内容Content。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

4. JavaScript 里有哪些数据类型

字符串值，数值，布尔值，数组，对象。

5. JS 怎么实现一个类。怎么实例化这个类。

1.动态原型方法

<code>
//动态原型方法
//创建对象
function Card(sID,ourName){
this.ID = sID;
this.OurName = ourName;
this.Balance = 0;
if(typeof Card._initialized == "undefined"){
//添加一个SaveMoney的方法
Card.prototype.SaveMoney = function(money){
this.Balance += money;
};
//添加一个ShowBalance的方法
Card.prototype.ShowBalance = function(){
alert(this.Balance);
};
Card._initialized = true;
}
}
//使用对象
var cardAA = new Card(1000,'james');
var cardBB = new Card(1001,'sun');
cardAA.SaveMoney(30);
cardBB.SaveMoney(80);
cardAA.ShowBalance();
cardBB.ShowBalance();
</code>

2.混合的构造函数/原型方式

<code>
//混合的构造函数/原型方式
//创建对象
function Card(sID,ourName){
this.ID = sID;
this.OurName = ourName;
this.Balance = 0;
}
Card.prototype.SaveMoney = function(money){
this.Balance += money;
};
Card.prototype.ShowBalance = function(){
alert(this.Balance);
};
//使用对象
var cardAA = new Card(1000,'james');
var cardBB = new Card(1001,'sun');
cardAA.SaveMoney(30);
cardBB.SaveMoney(80);
cardAA.ShowBalance();
cardBB.ShowBalance();

</code>

6. 请列举五个常用的 Javascript DOM 方法

	document.getElementsByName  --- 返回的是一个列表对象
    document.getElementById       ---  返回的是一个元素对象
    document.createTextNode     --- 创建一个文本节点
    document.createElement		--- 创建一个元素节点
    removeChild(node) - 删除子节点

二. 项目实例

1. 导航栏:

网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域,寻找资源。
设置导航栏如下:
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            margin: auto;
            width: 100%;
            height: 40px;
            background-color: #55a8ea;
            /*内容会被修剪，并且其余内容是不可见的。*/
            overflow: hidden;
            text-align: center;
        }

        .header li {
            /*设置li为行内块级元素*/
            display: inline-block;
            width: 100px;
            height: 40px;
            padding-top: 12px;
            text-align: center;
        }

        .header li:hover {
            background-color: #00619f;;
        }

        .header li a {
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            font-family: "WenQuanYi Micro Hei";
        }

        .active {
            background-color: #00619f;
        }

    </style>
</head>
<body>
<div class="header">
    <ul>
        <li class="active"><a href="#">首页</a></li>
        <li ><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a></li>
        <li><a href="#">企业VI</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#">案例展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>

</div>
</body>
</html>

在这里插入图片描述

2. 特征布局:图片列表

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #title {

            height: 34px;
            font-size: 18px;
            font-family: "WenQuanYi Micro Hei";
            color: #000;
            font-weight: bold;
            padding-top: 16px;
            padding-left: 20px;
        }

        img {

            height: 68px;
            width: 160px;
        }

        #photo {
            width: 960px;
            text-align: center;
        }
        tr{
            display: inline-block;
            margin: 0  20px  25px  10px;
            width: 960px;
        }
        td{
            display: inline;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div id="title">
    图片展示
</div>

<div id="photo">
    <table >
        <tr >
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
        </tr>
        <tr>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
            <td><img src="78971891df5228ccae97c8888a1c2e60.jpeg"></td>
        </tr>

    </table>

</div>


</body>
</html>

在这里插入图片描述

3. 特征布局:淘宝主页

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: inline-block;
            margin: 17px 0 0 20px;
        }

        table{
            border-spacing: 0;
        }

        tr{

            width: 200px;
            text-align: center;
        }

        #tip {
            background-color: red;
            height: 20px;
            width: 3px;
        }

        #title {
            display: inline;
            margin-left: 10px;
            font-weight: bold;
            font-family: "WenQuanYi Micro Hei";
            font-size: 18px;
        }

        #title_table {
            margin: 30px 0 0 30px;
        }
    </style>
</head>
<body>
<div style="height: 345px;width: 500px">
    <table id="title_table" >
        <tr>
            <td id="tip"></td>
            <td id="title">淘宝女装</td>
        </tr>
    </table>

    <div style="float: left">
        <img src="TB1RWs2afc3T1VjSZLeXXbZsVXa-380-400.jpg" style="width: 212px;height: 239px">
    </div>

    <div style="float: left">
        <img src="TB1C9gOb.gQMeJjy0FjXXaExFXa-238-132.jpg" style="width: 100px;height: 110px">

        <img src="O1CN01pbeyOC1dCBXXvQRqj_!!63523699.jpg_400x400.jpg" style="width: 100px;height: 110px">

    </div>
    <div style="float: left;margin: 5px 0 0 20px">
        <table>
            <tr >
                <td height="30px" width="100px"><b>时尚包包</b></td>
                <td height="30px" width="100px"><b>精品女鞋</b></td>
            </tr>
        </table>
    </div>
    <div style="float: left" >
        <table width="200px" id="table1">
            <tr>
                <td style="border: 1px dashed cornflowerblue;width: 105px;height: 35px">新品上市</td>
                <td style="border: 1px dashed cornflowerblue;width: 105px;height: 35px">女装</td>
            </tr>
            <tr>
                <td style="border: 1px dashed cornflowerblue;width: 105px;height: 35px">欧美风</td>
                <td style="border: 1px dashed cornflowerblue;width: 105px;height: 35px">美搭</td>
            </tr>
        </table>
    </div>
</div>

</body>
</html>

效果图：
在这里插入图片描述

4. 电影排行榜

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }


        .box {
            width: 300px;
            height: 450px;
            border: 1px solid gray;
            margin: 0 auto;
            margin-top: 50px;
        }

        .box h1 {
            color: green;
            font-size: 20px;
            line-height: 35px;
            font-weight: bold;
            border: 1px dashed gray;
            padding-left: 10px;
        }


        .box li {
            list-style: none;
            padding: 10px 15px;
            border: 1px dashed gray;

        }


        .box li span {
            background-color: gray;
            display: inline-block;
            width: 20px;
            height: 20px;
            color: white;
            text-align: center;
        }


        .box li:nth-child(-n+3) span {
            background-color: green;
            color: white;
        }

        .content {
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }

        .content img {
            width: 80px;
            height: 120px;
            float: left;
        }

        .content p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;

        }


        .current .content{
            display: block;
        }
    </style>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script>
        $(function () {
            $('li').mouseenter(function () {
                $(this).addClass('current');

            });

            $('li').mouseleave(function () {
                $(this).removeClass('current');

            });
        })

    </script>
</head>
<body>

<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li>
            <span>1</span> 哪吒之魔童降世
            <div class="content ">
                <img src="060828381f30e92405a6f9e242086e061c95f7e7.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>

        <li>
            <span>2</span> 烈火英雄
            <div class="content ">
                <img src="8b13632762d0f703b1f35f0c06fa513d2797c599.jpg">
                <p>
                    滨港市海港码头发生管道爆炸，整个罐区的原油都顺着A01油罐往外流，化成火海和阵阵爆炸，威胁全市、全省，甚至邻国的安全。慌乱的市民们四处奔逃，一辆辆消防车却逆向冲进火海……
                </p>
            </div>
        </li>



    </ul>
</div>


</body>
</html>

在这里插入图片描述

5. 仿腾讯微博效果图

题目详情

参考网址:

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿腾讯微博效果</title>
    <style type="text/css">
        body, div, h2, h3, ul, li, p {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        ul {
            list-style-type: none;
        }

        body {
            color: #333;
            background: #3c3a3b;
            font: 12px/1.5 \5b8b\4f53;
        }

        #msgBox {
            width: 500px;
            background: #fff;
            border-radius: 5px;
            margin: 10px auto;
            padding-top: 10px;
        }

        #msgBox form h2 {
            font-weight: 400;
            font: 400 18px/1.5 \5fae\8f6f\96c5\9ed1;
        }

        #msgBox form {
            background: url(img/boxBG.jpg) repeat-x 0 bottom;
            padding: 0 20px 15px;
        }

        #userName, #conBox {
            color: #777;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            background: #fff url(img/inputBG.png) repeat-x;
            padding: 3px 5px;
            font: 14px/1.5 arial;
        }

        #userName.active, #conBox.active {
            border: 1px solid #7abb2c;
        }

        #userName {
            height: 20px;
        }

        #conBox {
            width: 448px;
            resize: none;
            height: 65px;
            overflow: auto;
        }

        #msgBox form div {
            position: relative;
            color: #999;
            margin-top: 10px;
        }

        #msgBox img {
            border-radius: 3px;
        }

        #face {
            position: absolute;
            top: 0;
            left: 172px;
        }

        #face img {
            width: 30px;
            height: 30px;
            cursor: pointer;
            margin-right: 6px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        #face img.hover, #face img.current {
            width: 28px;
            height: 28px;
            border: 1px solid #f60;
            opacity: 1;
            filter: alpha(opacity=100);
        }

        #sendBtn {
            border: 0;
            width: 112px;
            height: 30px;
            cursor: pointer;
            margin-left: 10px;
            background: url(img/btn.png) no-repeat;
        }

        #sendBtn.hover {
            background-position: 0 -30px;
        }

        #msgBox form .maxNum {
            font: 26px/30px Georgia, Tahoma, Arial;
            padding: 0 5px;
        }

        #msgBox .list {
            padding: 10px;
        }

        #msgBox .list h3 {
            position: relative;
            height: 33px;
            font-size: 14px;
            font-weight: 400;
            background: #e3eaec;
            border: 1px solid #dee4e7;
        }

        #msgBox .list h3 span {
            position: absolute;
            left: 6px;
            top: 6px;
            background: #fff;
            line-height: 28px;
            display: inline-block;
            padding: 0 15px;
        }

        #msgBox .list ul {
            overflow: hidden;
            zoom: 1;
        }

        #msgBox .list ul li {
            float: left;
            clear: both;
            width: 100%;
            border-bottom: 1px dashed #d8d8d8;
            padding: 10px 0;
            background: #fff;
            overflow: hidden;
        }

        #msgBox .list ul li.hover {
            background: #f5f5f5;
        }

        #msgBox .list .userPic {
            float: left;
            width: 50px;
            height: 50px;
            display: inline;
            margin-left: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        #msgBox .list .content {
            float: left;
            width: 400px;
            font-size: 14px;
            margin-left: 10px;
            font-family: arial;
            word-wrap: break-word;
        }

        #msgBox .list .userName {
            display: inline;
            padding-right: 5px;
        }

        #msgBox .list .userName a {
            color: #2b4a78;
        }

        #msgBox .list .msgInfo {
            display: inline;
            word-wrap: break-word;
        }

        #msgBox .list .times {
            color: #889db6;
            font: 12px/18px arial;
            margin-top: 5px;
            overflow: hidden;
            zoom: 1;
        }

        #msgBox .list .times span {
            float: left;
        }

        #msgBox .list .times a {
            float: right;
            color: #889db6;
            display: none;
        }

        .tr {
            overflow: hidden;
            zoom: 1;
        }

        .tr p {
            float: right;
            line-height: 30px;
        }

        .tr * {
            float: left;
        }
    </style>
    <script>
        /*-------------------------- +
  获取id, class, tagName
 +-------------------------- */
        var get = {
            byId: function (id) {
                return typeof id === "string" ? document.getElementById(id) : id
            },
            byClass: function (sClass, oParent) {
                var aClass = [];
                var reClass = new RegExp("(^| )" + sClass + "( |$)");
                var aElem = this.byTagName("*", oParent);
                for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
                return aClass
            },
            byTagName: function (elem, obj) {
                return (obj || document).getElementsByTagName(elem)
            }
        };
        /*-------------------------- +
          事件绑定, 删除
         +-------------------------- */
        var EventUtil = {
            addHandler: function (oElement, sEvent, fnHandler) {
                oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () {
                    oElement["_" + sEvent + fnHandler]()
                }, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))
            },
            removeHandler: function (oElement, sEvent, fnHandler) {
                oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])
            },
            addLoadHandler: function (fnHandler) {
                this.addHandler(window, "load", fnHandler)
            }
        };

        /*-------------------------- +
          设置css样式
          读取css样式
         +-------------------------- */
        function css(obj, attr, value) {
            switch (arguments.length) {
                case 2:
                    if (typeof arguments[1] == "object") {
                        for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
                    } else {
                        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
                    }
                    break;
                case 3:
                    attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
                    break;
            }
        };

        EventUtil.addLoadHandler(function () {
            var oMsgBox = get.byId("msgBox");
            var oUserName = get.byId("userName");
            var oConBox = get.byId("conBox");
            var oSendBtn = get.byId("sendBtn");
            var oMaxNum = get.byClass("maxNum")[0];
            var oCountTxt = get.byClass("countTxt")[0];
            var oList = get.byClass("list")[0];
            var oUl = get.byTagName("ul", oList)[0];
            var aLi = get.byTagName("li", oList);
            var aFtxt = get.byClass("f-text", oMsgBox);
            var aImg = get.byTagName("img", get.byId("face"));
            var bSend = false;
            var timer = null;
            var oTmp = "";
            var i = 0;
            var maxNum = 140;

            //禁止表单提交
            EventUtil.addHandler(get.byTagName("form", oMsgBox)[0], "submit", function () {
                return false
            });

            //为广播按钮绑定发送事件
            EventUtil.addHandler(oSendBtn, "click", fnSend);

            //为Ctrl+Enter快捷键绑定发送事件
            EventUtil.addHandler(document, "keyup", function (event) {
                var event = event || window.event;
                event.ctrlKey && event.keyCode == 13 && fnSend()
            });

            //发送广播函数
            function fnSend() {
                var reg = /^\s*$/g;
                if (reg.test(oUserName.value)) {
                    alert("\u8bf7\u586b\u5199\u60a8\u7684\u59d3\u540d");
                    oUserName.focus()
                } else if (!/^[u4e00-\u9fa5\w]{2,8}$/g.test(oUserName.value)) {
                    alert("\u59d3\u540d\u75312-8\u4f4d\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\u3001\u6c49\u5b57\u7ec4\u6210\uff01");
                    oUserName.focus()
                } else if (reg.test(oConBox.value)) {
                    alert("\u968f\u4fbf\u8bf4\u70b9\u4ec0\u4e48\u5427\uff01");
                    oConBox.focus()
                } else if (!bSend) {
                    alert("\u4f60\u8f93\u5165\u7684\u5185\u5bb9\u5df2\u8d85\u51fa\u9650\u5236\uff0c\u8bf7\u68c0\u67e5\uff01");
                    oConBox.focus()
                } else {
                    var oLi = document.createElement("li");
                    var oDate = new Date();
                    oLi.innerHTML = "<div class=\"userPic\"><img src=\"" + get.byClass("current", get.byId("face"))[0].src + "\"></div>\
							 <div class=\"content\">\
							 	<div class=\"userName\"><a href=\"javascript:;\">" + oUserName.value + "</a>:</div>\
								<div class=\"msgInfo\">" + oConBox.value.replace(/<[^>]*>|&nbsp;/ig, "") + "</div>\
								<div class=\"times\"><span>" + format(oDate.getMonth() + 1) + "\u6708" + format(oDate.getDate()) + "\u65e5 " + format(oDate.getHours()) + ":" + format(oDate.getMinutes()) + "</span><a class=\"del\" href=\"javascript:;\">\u5220\u9664</a></div>\
							 </div>";
                    //插入元素
                    aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);

                    //重置表单
                    get.byTagName("form", oMsgBox)[0].reset();
                    for (i = 0; i < aImg.length; i++) aImg[i].className = "";
                    aImg[0].className = "current";

                    //将元素高度保存
                    var iHeight = oLi.clientHeight - parseFloat(css(oLi, "paddingTop")) - parseFloat(css(oLi, "paddingBottom"));
                    var alpah = count = 0;
                    css(oLi, {"opacity": "0", "height": "0"});
                    timer = setInterval(function () {
                        css(oLi, {"display": "block", "opacity": "0", "height": (count += 8) + "px"});
                        if (count > iHeight) {
                            clearInterval(timer);
                            css(oLi, "height", iHeight + "px");
                            timer = setInterval(function () {
                                css(oLi, "opacity", (alpah += 10));
                                alpah > 100 && (clearInterval(timer), css(oLi, "opacity", 100))
                            }, 30)
                        }
                    }, 30);
                    //调用鼠标划过/离开样式
                    liHover();
                    //调用删除函数
                    delLi()
                }
            };

            //事件绑定, 判断字符输入
            EventUtil.addHandler(oConBox, "keyup", confine);
            EventUtil.addHandler(oConBox, "focus", confine);
            EventUtil.addHandler(oConBox, "change", confine);

            //输入字符限制
            function confine() {
                var iLen = 0;
                for (i = 0; i < oConBox.value.length; i++) iLen += /[^\x00-\xff]/g.test(oConBox.value.charAt(i)) ? 1 : 0.5;
                oMaxNum.innerHTML = Math.abs(maxNum - Math.floor(iLen));
                maxNum - Math.floor(iLen) >= 0 ? (css(oMaxNum, "color", ""), oCountTxt.innerHTML = "\u8fd8\u80fd\u8f93\u5165", bSend = true) : (css(oMaxNum, "color", "#f60"), oCountTxt.innerHTML = "\u5df2\u8d85\u51fa", bSend = false)
            }

            //加载即调用
            confine();

            //广播按钮鼠标划过样式
            EventUtil.addHandler(oSendBtn, "mouseover", function () {
                this.className = "hover"
            });

            //广播按钮鼠标离开样式
            EventUtil.addHandler(oSendBtn, "mouseout", function () {
                this.className = ""
            });

            //li鼠标划过/离开处理函数
            function liHover() {
                for (i = 0; i < aLi.length; i++) {
                    //li鼠标划过样式
                    EventUtil.addHandler(aLi[i], "mouseover", function (event) {
                        this.className = "hover";
                        oTmp = get.byClass("times", this)[0];
                        var aA = get.byTagName("a", oTmp);
                        if (!aA.length) {
                            var oA = document.createElement("a");
                            oA.innerHTML = "删除";
                            oA.className = "del";
                            oA.href = "javascript:;";
                            oTmp.appendChild(oA)
                        } else {
                            aA[0].style.display = "block";
                        }
                    });

                    //li鼠标离开样式
                    EventUtil.addHandler(aLi[i], "mouseout", function () {
                        this.className = "";
                        var oA = get.byTagName("a", get.byClass("times", this)[0])[0];
                        oA.style.display = "none"
                    })
                }
            }

            liHover();

            //删除功能
            function delLi() {
                var aA = get.byClass("del", oUl);

                for (i = 0; i < aA.length; i++) {
                    aA[i].onclick = function () {
                        var oParent = this.parentNode.parentNode.parentNode;
                        var alpha = 100;
                        var iHeight = oParent.offsetHeight;
                        timer = setInterval(function () {
                            css(oParent, "opacity", (alpha -= 10));
                            if (alpha < 0) {
                                clearInterval(timer);
                                timer = setInterval(function () {
                                    iHeight -= 10;
                                    iHeight < 0 && (iHeight = 0);
                                    css(oParent, "height", iHeight + "px");
                                    iHeight == 0 && (clearInterval(timer), oUl.removeChild(oParent))
                                }, 30)
                            }
                        }, 30);
                        this.onclick = null
                    }
                }
            }

            delLi();

            //输入框获取焦点时样式
            for (i = 0; i < aFtxt.length; i++) {
                EventUtil.addHandler(aFtxt[i], "focus", function () {
                    this.className = "active"
                });
                EventUtil.addHandler(aFtxt[i], "blur", function () {
                    this.className = ""
                })
            }

            //格式化时间, 如果为一位数时补0
            function format(str) {
                return str.toString().replace(/^(\d)$/, "0$1")
            }

            //头像
            for (i = 0; i < aImg.length; i++) {
                aImg[i].onmouseover = function () {
                    this.className += " hover"
                };
                aImg[i].onmouseout = function () {
                    this.className = this.className.replace(/\s?hover/, "")
                };
                aImg[i].onclick = function () {
                    for (i = 0; i < aImg.length; i++) aImg[i].className = "";
                    this.className = "current"
                }
            }
        });
    </script>
</head>
<body>
<div id="msgBox">
    <form>
        <h2>来 , 说说你在做什么 , 想什么</h2>
        <div>
            <input id="userName" class="" value="">
            <p id="face"><img src="img/face1.gif" class="current"><img src="img/face2.gif" class=""><img src="img/face3.gif" class=""><img src="img/face4.gif" class=""><img src="img/face5.gif" class=""><img src="img/face6.gif" class=""><img src="img/face7.gif" class=""><img src="img/face8.gif" class=""></p>
        </div>
        <div><textarea id="conBox" class=""></textarea></div>
        <div class="tr">
            <p>
                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
                <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" class="">
            </p>
        </div>
    </form>
    <div class="list">
        <h3><span>大家在说</span></h3>
        <ul>

            <li class="">
                <div class="userPic"><img src="img/face.gif"></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>
                    <div class="times"><span>07月05日 12:20</span><a class="del" href="javascript:;" style="display: none;">删除</a></div>
                </div>
            </li>
            <li class="">
                <div class="userPic"><img src="img/face.gif"></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">新增选择头像功能。</div>
                    <div class="times"><span>07月05日 12:08</span><a class="del" href="javascript:;" style="display: none;">删除</a></div>
                </div>
            </li>
            <li class="">
                <div class="userPic"><img src="img/face.gif"></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">增加了记录广播时间的功能。</div>
                    <div class="times"><span>07月04日 16:55</span><a class="del" href="javascript:;" style="display: none;">删除</a></div>
                </div>
            </li>
            <li class="">
                <div class="userPic"><img src="img/face.gif"></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">增加了输入字符检测功能，英文/半角为半个字符，汉字/全角为一个字符。</div>
                    <div class="times"><span>07月04日 08:30</span><a class="del" href="javascript:;" style="display: none;">删除</a></div>
                </div>
            </li>
            <li class="">
                <div class="userPic"><img src="img/face.gif"></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">仿腾讯微博效果，欢迎大家测试！</div>
                    <div class="times"><span>07月03日 20:19</span><a class="del" href="javascript:;" style="display: none;">删除</a></div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>