一、效果图
二、实现思路
1、布局
- 一个“ 我要发帖按钮 ”
- 一个发布信息的版块（默认隐藏）
- 动态创建发帖之后信息版块（jQuery实现）
<div class="bbs">
<header><span>我要发帖</span></header>
<section class="bbsit">
<ul></ul>
</section>
<div class="post">
<img src="" alt="">
<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="发布">
<input class="btn1" value="关闭">
</div>
</div>
- 预设置布局样式
<section class="bbsit">
<ul>
<li>
<div>
<img src="images/tou01.jpg" alt="">
</div>
<h>c测试</h>
<p>
<span>ssssss</span>
</p>
</li>
</ul>
</section>
2、样式设置
* {
margin: 0;
padding: 0;
}
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 #cccccc 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 #cecece solid;
margin-bottom: 10px;
}
.post select {
width: 200px;
height: 30px;
}
.post .content {
width: 450px;
height: 200px;
display: block;
margin: 10px 0;
border: 1px #cecece 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;
margin-right: 80px;
}
.post .btn1 {
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;
}
.bbsi img {
display: inline-block;
border-radius: 50%;
width: 20px;
height: 20px;
}
3、得到效果图
三、添加事件
1、首先让发帖版块显示出来
$(".bbs header span").click(function () {
// 在 slideDown() 与 slideUp() 方法之间进行切换
$(".post").slideToggle("slow");
});
使用jQuery的slideToggle动画实现显示关闭
2、同理使用slideUp作用于“ 发布 ” “ 关闭 ”按钮
$(".btn1").click(function () {
// 关闭向上滑动
$(".post").slideUp("slow");
});
$(".btn").click(function () {
// 发布向上滑动(发布完成也应该关闭发帖版块)
$(".post").slideUp("slow");
});
3、获取发帖版块里面输入的信息
// 获取输入框的值
const titleVal = $(".title").val();
// 获取版块的值
const opVal = $("select").val();
// 获取文本域的值
const textAVal = $(".content").val();
4、观察发布后图片效果
- 出现了随机的图片，所有写应该数组将所有的图片放进去，并得到随机图
//图片数组
imgArr = ["images/tou01.jpg", "images/tou02.jpg", "images/tou03.jpg", "images/tou04.jpg"];
//产生随机数
let number = parseInt(Math.random() * 4);
5、效果图中还出现了发布时间
// 获取当前时间24小时制
let day = new Date().toLocaleString('chinese', { hour12: false });
6、拼接获取的发布等信息
let bbsContent = `版块：${opVal} 内容：${textAVal} 发布时间：${day} `;
7、添加预设置的元素节点
// 增加节点div li
$(".bbsit>ul").prepend("<li></li>");
// 添加图片设置图片路径
let bImg = $("<img/>").attr("src", imgArr[number]);
// jq添加div并在div里面添加img
let bDiv = $("<div></div>").append(bImg);
// jq添加h1并将输入的内容赋给h1
let bH1 = $("<h1></h1>").html(titleVal);
// jq添加p并再添加span再将输入的内容赋给span
let bSpan = $("<p></p>").append("<span></span>").html(bbsContent);
// 将所有添加的元素添加到li中
$(".bbsit>ul>li:first").append(bDiv, bH1, bSpan);
需要在head里面引入jQuery
<script src="js/jquery-3.4.1.js"></script>
四、得到我们所看到的发帖功能
- 全部jq代码
$(function () {
imgArr = ["images/tou01.jpg", "images/tou02.jpg", "images/tou03.jpg", "images/tou04.jpg"];
$(".bbs header span").click(function () {
// 在 slideDown() 与 slideUp() 方法之间进行切换
$(".post").slideToggle("slow");
});
// 关闭发帖框
$(".btn1").click(function () {
// 向上滑动
$(".post").slideUp("slow");
});
$(".btn").click(function () {
// 获取当前时间
let day = new Date().toLocaleString('chinese', { hour12: false });
// 获取输入框的值
const titleVal = $(".title").val();
// 获取版块的值
const opVal = $("select").val();
// 获取文本域的值
const textAVal = $(".content").val();
let bbsContent = `版块：${opVal} 内容：${textAVal} 发布时间：${day} `;
// 增加节点div li
$(".bbsit>ul").prepend("<li></li>");
// 添加图片设置图片路径
let bImg = $("<img/>").attr("src", imgArr[number]);
// jq添加div并在div里面添加img
let bDiv = $("<div></div>").append(bImg);
// jq添加h1并将输入的内容赋给h1
let bH1 = $("<h1></h1>").html(titleVal);
// jq添加p并再添加span再将输入的内容赋给span
let bSpan = $("<p></p>").append("<span></span>").html(bbsContent);
// 将所有添加的元素添加到li中
$(".bbsit>ul>li:first").append(bDiv, bH1, bSpan);
// $(".post").hide(100);
// 向上滑动
$(".post").slideUp("slow");
})
});
