效果展示
思路
主要知識點：運用jQuery對HTML元素節點的操作(append)來添加帖子。
交互設計：用戶點擊頁面上的“論壇發帖”按鈕，出現表單，填寫表單后點擊“發帖”按鈕，jQuery獲取表單內容，創建新的節點（頭像隨機）來合成一個“帖子”，最終插入到當前頁面的結尾。
代碼
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>論壇發帖</title>
<style>
h2 {
text-align: center;
padding: 10px;
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
border-radius: 6px;
color: white;
margin-bottom: 30px;
letter-spacing: 0.8em;
cursor: pointer;
}
.post {
width: 50%;
height: 400px;
margin: 0 auto;
border: 1px solid rgb(221, 221, 221);
border-radius: 2px;
display: none;
position: absolute;
top: 100px;
background-color: white;
left: 25%;
}
.title {
width: 87%;
margin-left: 5%;
margin-top: 20px;
height: 2em;
border: 1px solid rgb(230, 230, 230);
padding-left: 1em;
}
.text {
width: 85%;
margin-left: 5%;
margin-top: 10px;
height: 60%;
border: 1px solid rgb(230, 230, 230);
padding: 1em;
font-size: 1.1em;
overflow: auto;
}
.combtn {
width: 30%;
margin-top: 10px;
margin-left: 35%;
height: 10%;
border: 1px solid rgb(230, 230, 230);
background-color: cornflowerblue;
color: white;
border-radius: 5px;
}
.comment_block {
margin: 0 auto;
width: 50%;
height: auto;
}
.touxiang {
width: 60px;
height: 60px;
float: left;
}
.touxiang img {
border: 1px white solid;
border-radius: 50%;
width: 100%;
height: 100%;
}
.content {
float: left;
width: 80%;
margin-left: 3%;
border: 1px solid rgb(221, 221, 221);
padding: 1em;
border-radius: 5px;
height: auto;
margin-bottom: 20px;
}
h4 {
font-size: 1.2em;
font-weight: normal;
margin-top: 0;
border-left: 6px solid cornflowerblue;
padding-left: 3%;
background-color: rgba(100, 149, 237, 0.2);
border-radius: 5px;
margin-bottom: 3%;
font-family: '宋體';
}
.com_body {
font-family: '宋體';
color: darkgray;
height: auto;
clear: both;
width: 96%;
margin: 0 auto;
margin-bottom: 10px;
/*text-indent: 2em;*/
}
.date {
width: 100%;
text-align: right;
font-size: 0.8em;
color: rgb(114, 114, 114);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div class="comment">
<h2>論壇發帖</h2>
<section>
<ul></ul>
</section>
<div class="post">
<input type="text" class="title" placeholder="請輸入標題">
<textarea class="text" placeholder="請輸入評論"></textarea>
<input type="button" value="發布評論" class="combtn">
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$("h2").click(function() {
$(".post").show()
})
var tou = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg");
$(".post .combtn").click(function() {
var $newLi = $("<li></li>"); //創建一個新的li節點元素
var iNum = Math.floor(Math.random() * 10); //隨機獲取頭像
var $block = $("<div class=comment_block></div>");
var $touImg = $("<div class=touxiang><img src=stitch/" + tou[iNum] + "></div>"); //創建頭像節點
var $comment = $("<div class=content></div>");
var $title = $("<h4>" + $(".title").val() + "</h4>"); //設置標題節點
var $newComBody = $("<div class=com_body><pre>" + $(".text").val() + "</pre></div>"); //創建一個新的div節點元素
var myDate = new Date();
var currentDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth() + 1) + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
var $newDate = $("<div class=date>" + currentDate + "</div>") //在div節點中插入發布時間；
$($block).append($touImg); //插入頭像
$($comment).append($title); //插入標題
$($comment).append($newComBody); //插入評論內容
$($comment).append($newDate);
$($block).append($comment);
$($newLi).append($block);
$(".comment section ul").append($newLi);
$(".post .text").val("");
$(".post .title").val("");
$(".post").hide();
})
});
</script>
</body>
</html>
頭像素材如下：
改進空間
1.交互方面可以再做得精細些，比如用戶不想發帖時可以隱藏發帖表單；
2.布局考慮響應式，字體大小使用相對單位；
3.添加刪帖/按時間排序功能；