论坛
css
* {
margin: 0;
padding: 0;
color: #333;
font: 16px/1.2 Arial, Helvetica, sans-serif, "幼体";
box-sizing: border-box;
}
.submit {
border: none;
padding: 2px 8px;
border-radius: 3px;
background-color: #F40;
color: #EFEFEF;
cursor: pointer;
user-select: none;
}
.submit:active {
background-color: #F20;
}
#comment {
padding: 10px;
width: 800px;
margin: 100px auto 0;
border: #DDD 1px solid;
}
.comment-reply {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.comment-content {
margin-bottom: 10px;
outline: none;
border: #DDD 1px solid;
padding: 10px;
resize: none;
width: 100%;
height: 75px;
overflow: hidden;
}
.item-content {
display: flex;
margin-bottom: 20px;
}
.content-title {
padding: 0 10px;
flex-basis: 80px;
height: 100px;
display: flex;
flex-direction: column;
}
.title-icon {
width: 60px;
height: 60px;
border-radius: 30px;
}
.title-nickname {
text-align: center;
margin-top: 10px;
}
.content-val {
position: relative;
flex-grow: 1;
padding: 10px 10px 30px;
border: #DDD 1px solid;
}
.val {
text-align: justify;
}
.control {
position: absolute;
width: 97%;
bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.time {
font-size: 14px;
color: #666;
}
.item-list {
border: #DDD solid;
border-width: 1px 1px 0;
margin-bottom: 20px;
}
.list-item {
border-bottom: #DDD 1px solid;
padding: 10px;
}
.fromWho,
.toWho {
padding: 0 5px;
color: #F40;
}
.toWho::before {
content: "对";
margin-right: 5px;
color: #333;
}
.toWho::after {
content: "说:";
margin: 0 5px;
color: #333;
}
jQuery
<section id="comment">
<div class="comment-reply">
<textarea class="comment-content"></textarea>
<span class="submit" data-level="0">发表评论</span>
</div>
<div class="comment-list"></div>
</section>
<script src="/js/jquery-3.2.1.min.js"></script>
<script>
function publish(e){
return $(`<dl class="comment-item">
<dt class="item-content">
<div class="content-title">
<img class="title-icon" src="${e.iconUrl}" alt="${e.nickName}头像">
<p class="title-nickname">${e.nickName}</p>
</div>
<div class="content-val">
<p class="val">
${e.content}
</p>
<p class="control">
<span class="time">${e.time}</span>
<span class="submit">评论</span>
</p>
</div>
</dt>
<dd class="item-list"></dd>
</dl>`);
}
let user = {
userId:12301,
iconUrl:"/icons/ljj.png",
nickName:"老姐姐"
};
function now(){
let now = new Date();
now = [
[
now.getFullYear(),
now.getMonth()+1,
now.getDate()
],[
now.getHours(),
now.getMinutes(),
now.getSeconds()
]
];
now = [now[0].join("-"),now[1].join(":")];
return now.join(" ");
}
$("#comment").on("click",".submit",function(){
let level = $(this).data("level"),val;
switch(level){
case 0:
val = $(this).prev(".comment-content").val().trim();
if(val.length==0){
alert("不能发表空帖");
}
user.content = val;
user.time = now();
$(".comment-list").append(publish(user));
return;
}
});
</script>