HTML和JS代码
<!DOCTYPE html> <!-- 声明文档类型 -->
<html>
<head lang="en">
<meta charset="UTF-8"> <!-- 设置字符集为 UTF-8 -->
<title>论坛</title> <!-- 设置页面标题为“论坛” -->
<link href="css/bbs.css" rel="stylesheet"> <!-- 引入外部样式表 bbs.css -->
</head>
<style> <!-- 这里可以写样式 -->
</style>
<body>
<div class="bbs">
<header>
<span onclick="add()">我要发帖</span> <!-- 点击触发 add() 函数 -->
</header>
<section id="main">
</section>
<div class="post" style="display: none;">
<input class="title" placeholder="请输入标题(1-50个字符)">所属版块:
<select>
<option>请选择版块</option>
<option>Python交流专区</option>
<option>Java交流专区</option>
<option>Web交流专区</option>
</select>
<textarea class="content"></textarea>
<input class="btn" value="发布" onclick="create()"> <!-- 点击触发 create() 函数 -->
<input class="btn" value="关闭" onclick="closing()"> <!-- 点击触发 closing() 函数 -->
</div>
</div>
</body>
<script>
// 点击“我要发贴”
function add() { // 定义 add() 函数
document.getElementsByClassName("post")[0].style.display = "block"; // 显示发帖区块
}
// 点击“关闭”
function closing() { // 定义 closing() 函数
document.getElementsByClassName("post")[0].style.display = "none"; // 隐藏发帖区块
}
// 点击“发布”
function create() { // 定义 create() 函数
var title = document.getElementsByClassName("title")[0].value; // 获取标题输入框的值
var select = document.getElementsByTagName('select')[0].value; // 获取选择框的值
var content = document.getElementsByClassName("content")[0].value; // 获取内容输入框的值
var newPost = document.createElement("div"); // 创建新的 div 元素
newPost.innerHTML = "<p>" + title + "</p><p>所属版块:" + select + "</p><p>" + content + "</p><button οnclick='del(this)'>删除</button><hr>"; // 设置新帖子的内容
document.getElementById("main").appendChild(newPost); // 在主区域添加新帖子
document.getElementsByClassName("post")[0].style.display = "none"; // 隐藏发帖区块
// 清空输入框的值
document.getElementsByClassName("title")[0].value = ""; // 清空标题输入框
document.getElementsByTagName('select')[0].value = "请选择版块"; // 重置选择框
document.getElementsByClassName("content")[0].value = ""; // 清空内容输入框
}
// 点击“删除”
function del(obj) { // 定义 del() 函数,用于删除帖子
obj.parentElement.remove(); // 删除点击按钮所在的帖子
}
</script>
</html>
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 #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;
}
.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;
}
.delbtn {
width: 60px;
height: 30px;
color: #fff;
background: #009966;
border: none;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 30px;
border-radius: 8px;
margin-left: 20px;
}
效果图片
- 这就是一个简单的论坛发帖