The effect is as shown in the figure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper{
width: 833px;
height: 636px;
padding: 10px 20px;
position: relative;
}
.Posting, .fb{
width: 270px;
line-height: 60px;
text-align: center;
font-size: 26px;
color: white;
border: 0;
border-radius: 20px;
background-color: #009966;
}
.box{
width: 656px;
border: 1px solid #cccccc;
padding: 10px;
position: absolute;
left: 110px;
z-index: 100;
background-color: white;
}
.sr{
width: 563px;
height: 40px;
border: 1px solid #cccccc;
outline: none;
margin-bottom: 20px;
}
.sct{
width: 251px;
height: 40px;
margin-bottom: 20px;
}
.fb{
margin-top: 20px;
border-radius: 20px;
}
.line{
height: 80px;
padding: 20px 0;
border-bottom: 1px dashed #999999;
}
.line h3{
height: 25px;
}
.line img{
width: 80px;
border-radius: 40px;
}
.line>div{
float: left;
}
.line>div:nth-of-type(2){
margin-top: -12px;
margin-left: 10px;
color: #666666;
}
.plate{
margin-right: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div >
<button class="Posting">我要发贴</button>
</div>
<hr>
<div class="box" style="display: none;" >
<input type="text" class="sr" placeholder="请输入标题(1~50个字符)"><br>
<span>所属板块：</span>
<select name="" class="sct">
<option value="请选择板块">请选择板块</option>
<option value="电子书籍">电子书籍</option>
<option value="新课来了">新课来了</option>
<option value="新手报到">新手报到</option>
<option value="职业规划">职业规划</option>
</select><br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<div><button class="fb">发布</button></div>
</div>
<div class="box2">
</div>
</div>
<script>
// 获取我要发帖按钮
var _Posting=document.querySelector(".Posting");
// 获取发帖的窗口
var _box=document.querySelector(".box")
console.log(_box);
// 设置发帖按钮点击事件
_Posting.onclick=function(){
// 点击发帖后显示发帖窗口
_box.style.display="block";
}
// 获取我要发布按钮
var _fb=document.querySelector(".fb");
// 获取发布之后出现的盒子
var _box2=document.querySelector(".box2")
// 给发布按钮添加点击事件
_fb.onclick=function(){
// 获取标题标签
var _sr=document.querySelector(".sr");
// 获取select标签
var _sct=document.querySelector(".sct");
// 设置一个1-4的随机数
var tx=Math.floor(Math.random()*4)+1;
// 发布窗口消失
_box.style.display="none";
// 获取时间
var date=new Date();
var n=date.getFullYear(); //年
var y=date.getMonth()+1; //月
var r=date.getDate(); //日
var x=date.getDay(); //星期
var s=date.getHours(); //时
var f=date.getMinutes(); //分
var m=date.getSeconds(); //秒
// 判断时分秒小于10的时候 显示01:07:03
if(s<10){
s="0"+s;
}
if(f<10){
f="0"+f;
}
if(m<10){
m="0"+m;
}
// 更改发布后盒子里的内容
_box2.innerHTML=`<div class="line">
<div><img class="tx" src="./02/images/tou0${
tx}.jpg" alt=""></div>
<div>
<h3>${
_sr.value}</h3>
板块：<span class="plate">${
_sct.value}</span>
发表时间：<span class="time">${
n}-${
y}-${
r} ${
s}:${
f}</span>
</div>
</div>`+_box2.innerHTML
// 把发帖窗口的题目清空
_sr.value="";
}
</script>
</body>
</html>
Note: The img inside needs to add pictures and modify the path