<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
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 #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: 5px;
}
.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;
}
.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;
}
</style>
</head>
<body>
<div class="bbs">
<header><span onclick="fa()">我要发帖</span></header>
<section>
<ul>
<!-- <li>
<div>
<img src="" alt="">
</div>
<h1></h1>
<p>
<span></span>
</p>
</li> -->
</ul>
</section>
<div class="post" id="post1">
<input id="title" placeholder="请输入标题（1-50个字符）"><br>
所属版块：<select>
<option>请选择版块</option>
<option>电子书籍</option>
<option>新课来了</option>
<option>新手报到</option>
<option>职业规划</option>
</select>
<textarea class="content"></textarea>
<input class="btn" value="发布" onclick="chu()">
</div>
</div>
<script>
function fa() {
document.getElementById("post1").style.display = "block";
}
function touxiang() {
var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
var sui = parseInt(Math.random() * 4);
return tou[sui];
}
function chu() {
document.getElementById("post1").style.display = "none";
var s = document.getElementsByTagName("ul")[0];
var a = document.createElement("li");
var b = document.createElement("div");
var c = document.createElement("img");
var d = document.createElement("h1");
var e = document.createElement("p");
var f = document.createElement("span");
s.appendChild(a);
a.className = ".bbs section ul li";
a.appendChild(b);
b.className = ".bbs section ul li div";
b.appendChild(c);
c.className = ".bbs section ul li div img";
c.src = "" + touxiang();
a.appendChild(d);
d.className = ".bbs section ul li h1";
d.innerHTML = document.getElementById("title").value;
a.appendChild(e);
e.className = ".bbs section ul li p";
e.innerHTML = "版块：" + document.getElementsByTagName("select")[0].value;
e.appendChild(f);
f.className = ".bbs section ul li p span";
var today = new Date();
var nian = today.getFullYear();
var yue = today.getMonth() + 1;
var ri = today.getDate();
var shi = today.getHours();
var fen = today.getMinutes();
var miao = today.getSeconds();
f.innerHTML = "发表时间：" + nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao;
document.getElementById("title").value = "";
document.getElementsByTagName("select")[0].value = "";
s.insertBefore(a, s.firstElementChild);
}
</script>
</body>
</html>
