发微博页面

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博</title>
    <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <!--引入样式表-->
    <link rel="stylesheet" href="index.css">
    <!--引入自定义脚本-->
    <script src="index.js"></script>

</head>
<body>
    <div class="warp">
        <!--发布按钮和输入框-->
        <div class="header">
            <h3>发送微博</h3>
            <textarea rows="3" cols="20" class="inp" ></textarea>
            <div class="put">
                <button class="btn">发 布</button>
            </div>
        </div>
        <!--信息-->
        <div class="content">
        </div>
        <div class="footer">
            <div class="btn-box">
                <a href="javascript:;" class="default">1</a>
                <a href="javascript:;">2</a>
                <a href="javascript:;">3</a>
            </div>
        </div>
    </div>

    <script>

    </script>

</body>
</html>

CSS页面

body,html{
    background: #f6f6f6;
}
.warp{
    width:960px;
    background: #ffffff;
    margin:0 auto;
    padding:100px;
    box-sizing: border-box;
}
.header{
    width: 100%;
    height: 230px;
}
.inp{
    width: 760px;
    height:100px;
    outline:none;
    font-size:18px;
    resize: none;
}
.put{
    position: relative;
    width: 100%;
    height: 50px;
}
.put .btn{
    position:absolute;
    right:10px;
    top:15px;
    width:100px;
    height:30px;
    border:0;
    background: #4de753;
    /*background: #49af4f;*/
    font-size:18px;
    outline:none;
    border-radius:5px;
}
.put .btn:hover{
    background: #4dcb53;
    /*background: #4de753;*/
    cursor: pointer;
}
.content{
    width:100%;
    /*background: #3050ff;*/
    overflow: hidden;
    position: relative;

}
.text-box{
    width:100%;
    /*background:red;*/
    margin-top:20px;
    padding:0 0 15px 0;
    box-sizing: border-box;
    border-bottom: 2px solid #b7bcbc;
}
.text-box>p{
    color: #292929;
}
.text-box>.infoOperation{
    color: #5d6565;
}
.text-box>.infoHandle{
    position: absolute;
    right:40px;
}
.infoHandle>a{
    width:100px;
    text-decoration: none;
    color: #5d6565;
    background:url("icons.png") no-repeat 0 0;
    background-size:25px;
    margin-left:10px;
    padding-left:30px;
}

.infoHandle >a:nth-child(2){
    background:url("icons.png") no-repeat 0 -22px;
    background-size:25px;
}

.infoHandle >a:nth-child(3){
    background:url("icons.png") no-repeat 0 -45px;
    background-size:25px;

}
.footer{
    margin-top:20px;
}
.footer>.btn-box{
    float: right;
}
.footer>.btn-box>a{
    width:25px;
    height:25px;
    border: 1px solid #999b9b;
    display: inline-block;
    text-decoration: none;
    text-align:center;
    line-height:25px;
    color: #999b9b;
    background: #f6f6f6;
    border-radius:3px;
}
.footer>.btn-box>a:hover{
    background: #49af4f;
    color:#ffffff;
}
.footer>.btn-box .default{
    background: #49af4f;
    color:#ffffff;
}

JS特效

//点击按钮后执行方法
$(function(){
    //按钮点击后执行方法
    $(".btn").click(function(){
        //只有当输入框的内容大于0的时候才可以发布
        var str = $(".inp").val();  //输入框内容
       if($.trim(str).length>0){
            $(".content").prepend("<div class=\"text-box\">\n" +
                "                <p>"+str+"</p>\n" +
                "                <span class=\"infoOperation\">"+createDate()+"</span>\n" +
                "                <span class=\"infoHandle\">\n" +
                "                    <a href=\"javascript:;\" class=\"content-top\">0</a>\n" +
                "                    <a href=\"javascript:;\" class=\"content-down\">0</a>\n" +
                "                    <a href=\"javascript:;\" class=\"content-del\">删除</a>\n" +
                "                </span>\n" +
                "            </div>");

           $(".inp").val("");

       }
    })

    function createDate(){
        var time = new Date();
        var times = time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日 "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
        return times;
    }
})

//点赞按钮点击后执行方法
$(".content-top").live("click",function(){
    $(this).html(parseInt($(this).html())+1);
})
//倒赞按钮点击后执行方法
$(".content-down").live("click",function(){
    $(this).html(parseInt($(this).html())+1);
})
//删除按钮点击后执行方法
$(".content-del").live("click",function(){
    $(this).parents(".text-box").remove();
})

猜你喜欢