用jquery实现微博的发布和删除功能！！！

最新推荐文章于 2022-02-24 22:40:26 发布

东哥爱编程

最新推荐文章于 2022-02-24 22:40:26 发布

阅读量917

点赞数

分类专栏：前端文章标签： js html5 前端

本文链接：https://blog.csdn.net/monk96/article/details/82531346

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

用html5+css+jquery实现微博的发布和删除功能，目前只实现了单机的功能！
下面是html5的内容：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css.css">


</head>
<body>
<div class="header">
    <img src="./img/新浪header.png" alt="">
</div>
<div class="content_bg">
    <div class="content">
        <div class="content_left">
            <img src="./img/新浪content_left.png" alt="">
        </div>
        <div class="content_center">
            <div class="content_center_box1">
            <img src="./img/content_center.png" alt="">
                <textarea name="" id="" cols="30" rows="10" class="tx"></textarea>
                <button class="bt" disabled>发表</button>
            </div>
            <div class="content_center_box2">


            </div>
        </div>
        <div class="content_right">
            <img src="./img/content_right.png" alt="">
        </div>
    </div>
</div><script src="jquery-1.11.3.js"></script>
<script src="js.js"></script>
</body>
</html>
这里是css样式的内容：
*{
    margin: 0;
    border:0;
    list-style: none;]
    
}
.header{
    margin-top: 0px;
    width: 100%;
    height: 50px;
    background: url("./img/新浪header.png") no-repeat;
    background-size:cover ;
}
.header>img{
    height: 50px;
}
.content_bg{
    height: 100%;
    width: 100%;
    background: url("./img/body_bg.jpg") no-repeat;
    background-size: cover;
}
.content{
    height: 820px;
    width: 1200px;
    margin: 0 auto ;
}
.content_left{
    float: left;
    height: 820px;
    width: 178px;

}
.content_center{
    padding-left: 10px;
    height: 850px;
    width: 746px;
    float: left;

}
.content_center_box1{
    padding-left: 10px;
    height: 210px;
    width: 746px;

    position: relative;

}
.content_center>img{
    height: 300px;
    width: 592px;

}
.content_right{
    float: right;
    height: 820px;
    width: 230px;
}
textarea{
    height: 94px;
    width: 719px;
    position: absolute;
    left: 16px;
    top: 52px ;
}
.bt{
    height: 43px;
    width: 104px;
    background: #ffc09f;
    position: absolute;
    bottom: 10px;
    right: 5px;
    border-radius: 5px;
}
.content_center_box2{
    padding: 15px;
    width: 700px;
    height: auto;
    background: white;
    margin-left: 10px;

}

.content_center_box2>.info{
    width: 700px;
    border-bottom:1px solid #ccc;
    height: auto;
}
.content_center_box2> .info .infoText{
    line-height: 25px;
    margin-bottom: 10px;

}
.content_center_box2> .info .infoOperation{
    width: 100%;
    overflow: hidden;
}
.content_center_box2> .info .infoOperation .infoTime{
    float: left;
    color:  #ccc;
    font-size: 12px;
}
.content_center_box2> .info .infoOperation .infodelete{
    float: right;
}

这是jquery的内容：
$(function () {
    //当点击时，验证输入框的内容，如果没有内容，则提示用户输入

    $("body").delegate(".tx","propertychange input",function () {

            if($(this).val().length>0){
                $(".bt").prop("disabled",false);

            }else{
                $(".bt").prop("disabled",true);

            }
        });
    $(".bt").click(function () {
        var $text=$(".tx").val();

        var $add=addweibo($text);

        //插入微博

        $(".content_center_box2").prepend($add);

    });
    $("body").delegate(".del","click",function () {
        $(this).parents(".info").remove();
    });
    function addweibo(weibo) {
        var $weibo= $(".content_center_box2").prepend("<div class=\"info\">\n" +
            "                <p class=\"infoText\"> 皮皮时光机\n" +
            +weibo+ "</p>\n" +
            "                <p class=\"infoOperation\">\n" +
            "                    <span class=\"infoTime\">"+gettime()+"</span>\n" +
            "                    <span class=\"infodelete\"><a href=\"javascript:;\" class='del'>删除</a></span>\n" +
            "                </p>\n" +
            "                </div>")
        return $weibo;
    }
    function gettime() {

        var date=new Date();

        var str=date.toLocaleDateString()+" "+date.getHours()+":"+date.getMinutes();
        console.log(str);
        return str;
    }
    gettime();
});