新浪微博
使用
jQuery語法實現的新浪微博頁面我要實現的功能：
- 點擊div可以輸入文本
- 輸入文本後可以發佈，沒有輸入文本不可發佈，發佈之後清空輸入框
- 實現贊、踩，刪除說說的功能
- 首先，佈局HTML頁面
<!--
* @Author: 碼小余
* @Date: 2020-06-18 09:32:49
* @LastEditTime: 2020-06-18 13:08:11
* @FilePath: \代碼\55-新浪微博\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>新浪微博</title>
<link rel="stylesheet" href="css/index.css" />
<link
rel="stylesheet"
href="http://at.alicdn.com/t/font_1892356_thenu1h4ko.css"
/>
<link rel="stylesheet" href="" />
<script src="../../jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="nav">
<img src="images/1.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>
- 編寫css代碼
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: url("../images/body_bg.jpg") center 0;
background-size: 100%;
}
.nav {
width: 100%;
height: 48px;
}
.nav > img {
width: 100%;
}
.content {
width: 990px;
height: auto;
overflow: hidden;
background: #90c4e2;
margin: 200px auto 0 auto;
}
.content > .left {
float: left;
width: 150px;
}
.content > .right {
float: right;
width: 231px;
}
.content > .center {
float: left;
width: 600px;
height: 165px;
background: url(../images/center.png);
background-size: 600px 165px;
}
.center > .comment {
width: 578px;
height: 78px;
margin-top: 41px;
margin-left: 11px;
resize: none;
border: none;
outline: none;
}
.center > .send {
width: 82px;
height: 30px;
margin-top: 1px;
margin-left: 508px;
border: none;
background: #ffc09f;
border-radius: 4px;
color: #fff;
outline: none;
}
.content > .messageList {
width: 600px;
background: #fff;
float: left;
margin-top: 10px;
}
.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: 14px;
color: #ccc;
}
.infoOperation > .infoHandle {
float: right;
font-size: 14px;
}
.infoHandle > a {
text-decoration: none;
color: #ccc;
margin-left: 10px;
}
.page {
width: 990px;
height: 40px;
background: #6daed8;
margin: 0 auto;
text-align: right;
box-sizing: border-box;
padding: 10px;
}
.page > a {
text-decoration: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
line-height: 20px;
color: #2b2b2b;
}
- 編寫js代碼
/*
* @Author: 碼小余
* @Date: 2020-06-18 11:21:09
* @LastEditTime: 2020-06-18 12:56:17
* @FilePath: \代碼\55-新浪微博\js\index.js
*/
$(function () {
// 0. 監聽內容時時輸入
$("body").delegate(".comment", "propertychange input", function () {
// 判斷是否輸入了內容
if ($(this).val().length > 0) {
// 讓按鈕可用
$(".send").prop("disabled", false);
} else {
// 讓按鈕不可用
$(".send").prop("disabled", true);
}
});
// 1. 監聽發佈按鈕的點擊
$(".send").click(function () {
// 拿到用戶輸入的內容
var $text = $(".comment").val();
// 根據內容創建節點
var $weibo = createEle($text);
// 插入微博
$(".messageList").prepend($weibo);
// 發佈成功後把輸入框替換爲空的
var $comment = $(`<textarea class="comment"></textarea>`);
$(".comment").replaceWith($comment);
});
// 2. 監聽頂點擊
$("body").delegate(".infoTop", "click", function () {
$(this).text(parseInt($(this).text()) + 1);
});
// 3. 監聽踩點擊
$("body").delegate(".infoDown", "click", function () {
$(this).text(parseInt($(this).text()) + 1);
});
// 4. 監聽刪除點擊
$("body").delegate(".infoDel", "click", function () {
$(this).parents(".info").remove();
});
// 創建節點方法
function createEle(text) {
var $weibo = $(
`<div class="info">
<p class="infoText">
` +
text +
`
</p>
<p class="infoOperation">
<span class="infoTime">
` +
formartDate() +
`
</span>
<span class="infoHandle">
<a href="javascript:;" class="iconfont icon-dianzan infoTop">0</a>
<a href="javascript:;" class="iconfont icon-cai infoDown">0</a>
<a href="javascript:;" class="iconfont icon-shanchu infoDel"
>刪除</a
>
</span>
</p>
</div>`
);
return $weibo;
}
// 生成時間方法
function formartDate() {
var date = new Date();
// 2020-06-18 10:40:23
console.log();
console.log();
console.log();
console.log();
console.log();
console.log();
return (
date.getFullYear() +
"-" +
(date.getMonth() + 1) +
"-" +
date.getDate() +
" " +
date.getHours() +
":" +
date.getMinutes() +
":" +
date.getSeconds()
);
}
formartDate();
});
實現效果如下：
