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

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

发表

这里是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();

});

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

猜你喜欢