效果图
HTML代码
<div class="bbs">
<header><span>我要发帖</span></header>
<section>
<ul></ul>
</section>
<div class="post">
<input class="title" placeholder="请输入标题(1-50个字符)">
所属版块:<select>
<option>请选择版块</option>
<option>电子书籍</option>
<option>新课来了</option>
<option>新手报到</option>
<option>职业规划</option>
</select>
<textarea class="content"></textarea>
<input class="btn" value="发布">
</div>
</div>
CSS代码
* {
margin: 0;
padding: 0;
font-family: "Arial", "���ź�";
}
ul, li {
list-style: none;
}
.bbs {
margin: 0 auto;
width: 600px;
position: relative;
}
header {
padding: 5px 0;
border-bottom: 1px solid #cecece;
}
header span {
display: inline-block;
width: 220px;
height: 50px;
color: #fff;
background: #009966;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 50px;
border-radius: 8px;
cursor: pointer;
}
.post {
position: absolute;
background: #ffffff;
border: 1px #999999 solid;
width: 500px;
left: 65px;
top: 70px;
padding: 10px;
font-size: 14px;
z-index: 999999;
display: none;
}
.post .title {
width: 450px;
height: 30px;
line-height: 30px;
display: block;
border: 1px #aaaaaa solid;
margin-bottom: 10px;
}
.post select {
width: 200px;
height: 30px;
}
a{
float: right;
}
.post .content {
width: 450px;
height: 200px;
display: block;
margin: 10px 0;
border: 1px #aaaaaa solid;
}
.post .btn {
width: 160px;
height: 35px;
color: #fff;
background: #009966;
border: none;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 35px;
border-radius: 8px;
cursor: pointer;
}
.bbs section ul li {
padding: 10px 0;
border-bottom: 1px #999999 dashed;
overflow: hidden;
}
.bbs section ul li div {
float: left;
width: 60px;
margin-right: 10px;
}
.bbs section ul li div img {
border-radius: 50%;
width: 60px;
}
.bbs section ul li h1 {
float: left;
width: 520px;
font-size: 16px;
line-height: 35px;
}
.bbs section ul li p {
color: #666666;
line-height: 25px;
font-size: 12px;
}
.bbs section ul li p span {
padding-right: 20px;
}
js代码
<script>
$('.bbs header span').click(function() {
console.log('用户点击了发帖');
$(this).html('内容不能为空')
$('.post').show(500)
})
$('.post .btn').click(function() {
if($('.title').val() == "" && $('.content').val() == ""){
alert('内容不能为空')
return
}
console.log('用户正在输入中...');
$('.post').hide(500)
var newLi = $('<li></li>')
var touimg = $('<div><img src="images/tou0' + randoms() + '.jpg"</div>')
var title = '<h2>' + $('.title').val() + '</h2>'
var newp = $('<p></p>')
var bankuai = '<span>板块:' + $('.post select').val() + '   发表时间:' + notTime() +'</span>'
var content = '<p>' + $('.content').val() + '</p>'
var drop = '<a href="#">删除</a>'
newp.append(bankuai)
newLi.append(touimg)
newLi.append(title)
newLi.append(newp)
newLi.append(drop)
newp.append(content)
$('.bbs section ul').prepend(newLi)
$('.title').val('')
$('.content').val('')
$(this).html('我要发帖')
$('a').click(function(){
$(this).parent('li').remove()
})
$('.post').hide(500)
})
function randoms() {
return Math.floor(Math.random() * (4 - 0 + 1)) + 0
}
function notTime() {
var _time = new Date();
var years = _time.getFullYear();
var months = _time.getMonth() + 1;
var date = _time.getDate();
var hours = _time.getHours();
var minutes = _time.getMinutes();
var second = _time.getSeconds();
return `${years}-${months}-${date} ${hours}:${minutes}:${second}`;
}
</script>