JS DOM实现论坛发帖页面

小杨不想写代码

于 2024-03-13 16:05:34 发布

阅读量319

点赞数 4

分类专栏：小项目 Jscript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_74270395/article/details/136682974

版权

Jscript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

小项目

2 篇文章 0 订阅

订阅专栏

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;
}

效果图片

在这里插入图片描述

这就是一个简单的论坛发帖

小杨不想写代码

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
JS DOM实现论坛发帖页面

HTML和JS代码<!DOCTYPE html> <html><head lang="en"> <meta charset="UTF-8">  <title>论坛</title>  <link href="css/bbs.css" rel="styles
复制链接

扫一扫