index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪微博</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="nav">
<img src="images/nav.png" alt="">
</div>
<div class="content">
<img src="images/left.png" alt="" class="left">
<div class="center">
<textarea class="comment"></textarea>
<input type="button" value="发布" class="send" disabled>
</div>
<img src="images/right.png" alt="" class="right">
<div class="messageList"></div>
</div>
<div class="page">
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</div>
</body>
</html>
index.css
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: url("../images/body_bg.png") no-repeat center 0;
background-size: cover;
}
.nav {
width: 100%;
height: 48px;
}
.nav>img {
width: 100%;
}
.content {
width: 1000px;
height: auto;
overflow: hidden;
background-color: #5fa6d1;
margin: 30px auto 0 auto;
}
.content>.left {
float: left;
width: 150px;
}
.content>.right {
float: right;
width: 240px;
}
.content>.center {
float: left;
width: 600px;
height: 168px;
background: url("../images/comment.png") no-repeat 0 0;
background-size: 600px 168px;
}
.center>.comment {
width: 565px;
height: 73px;
margin-top: 53px;
margin-left: 15px;
resize: none;
border: none;
}
.center>.send {
margin-top: 1px;
margin-left: 501px;
background: #fd8040;
width: 80px;
height: 28px;
border: none;
color: white;
}
.content>.messageList {
width: 595px;
background-color: #fff;
margin-left: 5px;
float: left;
}
.messageList>.info {
padding: 10px 20px;
border-bottom: 2px solid #ccc;
}
.info>.infoText {
line-height: 25px;
margin-bottom: 10px;
}
.info>.infoOperation {
width: 100%;
overflow: hidden;
}
.infoOperation>.infoTime {
float: left;
font-size: 13px;
color: #ccc;
}
.infoOperation>.infoHandle {
float: right;
font-size: 13px;
}
.infoHandle>a {
text-decoration: none;
color: #ccc;
margin-left: 10px;
padding-left: 25px;
}
.infoHandle>a:first-child {
background: url("../images/like.png") no-repeat 0 0;
background-size: 20px 20px;
}
.infoHandle>a:nth-child(2) {
background: url("../images/dislike.png") no-repeat 0 0;
background-size: 18px 18px;
}
.infoHandle>a:last-child {
background: url("../images/del.png") no-repeat 0 0;
background-size: 18px 18px;
}
.page {
width: 1000px;
height: 40px;
background-color: blanchedalmond;
margin: 0 auto;
text-align: right;
padding: 10px;
box-sizing: border-box;
}
.page>a {
text-decoration: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #000;
line-height: 20px;
text-align: center;
color: #2b2b2b;
}
index.js
$(function () {
$("body").delegate(".comment", "propertychange input", function () {
if ($(this).val.length > 0) {
$(".send").prop("disabled", false)
} else {
$(".send").prop("disabled", true)
}
})
$(".send").click(function () {
const $comment = $(".comment").val()
const $weiBo = createEle($comment)
$(".messageList").prepend($weiBo)
})
$("body").delegate(".infoUp", "click", function () {
$(this).text(parseInt($(this).text()) + 1)
})
$("body").delegate(".infoDown", "click", function () {
$(this).text(parseInt($(this).text()) + 1)
})
$("body").delegate(".infoDel", "click", function () {
$(this).parents(".info").remove()
})
function createEle(text) {
const $weiBo = $(`
<div class="info">
<p class="infoText">` + text + `</p>
<p class="infoOperation">
<span class="infoTime">` + getTime() + `</span>
<span class="infoHandle">
<a href="javascript:;" class="infoUp">0</a>
<a href="javascript:;" class="infoDown">0</a>
<a href="javascript:;" class="infoDel">删除</a>
</span>
</p>
</div>
`)
return $weiBo
}
function getTime() {
const date = new Date()
const y = date.getFullYear()
const mon = date.getMonth() + 1
const d = date.getDate()
const h = date.getHours()
const min = date.getMinutes()
return y + "-" + mon + "-" + d + " " + h + ":" + min
}
})