JS简易论坛发帖案例

2019-11-28 本文已影响0人橙赎

效果

一、实现过程

由于重点是javascript，所以html和css就不做过多介绍，文末会给出所有代码及资源。
首先实现思路是这样的：点击我要发帖按钮，弹出一个发帖框，发帖框有输入框，下拉框，还有文本域，再点击发布，内容会出现在我要发帖的下方。而点击我要发帖出现的发帖框是用display:none;先默认隐藏，通过点击我要发帖改变其display属性，使其变为display:block;出现在页面上，而发帖框里的内容是通过节点动态添加到一个ul标签里。在这里说一下这个ul的布局，首先ul里面没有任何东西，ul里面的每一项都是动态添加，这里演示一下添加内容后的效果：

动态添加li
可以看到一开始的ul里面是没有内容的，在点击发布后，就把li及里面的元素都添加进去了，下面是代码层次的演示，首先是发帖框的html部分

<div class="post">
            <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="发布" onclick="create()">
            <input class="btn" value="关闭" onclick="closing()">
        </div>

接下来是通过动态添加后的ul的html布局（初始状态是没有的，是动态添加后才有的）

             <ul>
                <li>
                    <div>
                        <img src="" alt="">
                    </div>
                    <h1>标题</h1>
                    <p>
                        <span>类型+发布时间+内容</span>
                    </p>
                </li>
            </ul>

接下来要做的事就是分别取出输入框、版块和内容的值。

内容的值是加到h1标签里，所以先创建h1标签，在创建标签之前先选中标题输入框

const titleElement = document.getElementsByClassName("title")[0]; 
const titleValue = titleElement.value;

通过类名来选中标题输入框，选中的是一个数组，所以取本身要加下标[0],取到之后再把value值传给titleValue，这个titleValue就是输入框输入的标题内容。接下来就是创建h1标签,并把titleValue作为h1的内容

const h1Element = document.createElement("h1");
h1Element.innerHTML = titleValue;

再通过同样的方式将下拉框、发布时间、内容传给span标签，再用p标签包裹

            //下拉框
            const selectElement = titleElement.nextElementSibling; //选中select标签
            const selectValue = selectElement.value;//传option的内容
            //文本域
            const textAreaElement = selectElement.nextElementSibling; //选中textarea标签
            const textAreaValue = textAreaElement.value;//传textarea的内容
            //创建时间
            const nowData = new Date();
            const nowyear = nowData.getFullYear(); //年
            const nowmonth = nowData.getMonth() + 1;//月
            const nowday = nowData.getDate();//日
            const nowhours = nowData.getHours();//小时
            const nowminute = nowData.getMinutes();//分钟
            const nowsecond = nowData.getSeconds();//秒
            const nowtime = `时间：${nowyear}-${nowmonth}-${nowday} ${nowhours}:${nowminute}:${nowsecond}`;//年-月-日：时：分：秒
            //将选择框 时间 文本域放入span
            const spanElement = document.createElement("span");//创建span标签
            spanElement.innerHTML = `版块：${selectValue} ${nowtime} 内容: ${textAreaValue}`;//将下拉框、文本域、时间传给span
             //创建 p标签
            const pElement = document.createElement("p");
            pElement.appendChild(spanElement);//span放入p标签中

接下来放图片。图片是用的数组来存储

const imgArry = ["image/tou01.jpg", "image/tou02.jpg", "image/tou03.jpg", "image/tou04.jpg"];

再创建图片地址，每张图片的显示是用随机数来产生，li标签、img标签、以及包裹img标签的div标签

             //创建img图片地址
            const index = Math.floor(Math.random() * 4); //总共四张图片
            const imgUrl = imgArry[index];
             //创建 div标签
            const divElement = document.createElement("div");
             //创建图片标签
            const imgElement = document.createElement("img");
            imgElement.setAttribute("src", imgUrl);
            //将图片放入div中
            divElement.appendChild(imgElement);

接下来就是做汇总，就是把div标签、h1标签、p标签放入li标签中，再把li标签放如ul标签


            const seElement = document.getElementById("se").firstElementChild;    //选中ul
            const liElement = document.createElement("li");   // 创建li
            seElement.appendChild(liElement);
             liElement.appendChild(divElement);
            liElement.appendChild(h1Element);
            liElement.appendChild(pElement);
            seElement.insertBefore(liElement, seElement.firstElementChild);//li每次放入都在前一个li前面

二、代码部分

html部分

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>论坛</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>

<body>
    <div class="bbs">
        <header>
            <span onclick="tijiao()">我要发帖</span>
        </header>

        <section id="se">
            <!-- <ul>
                <li>
                    <div>
                        <img src="" alt="">
                    </div>
                    <h1></h1>
                    <p>
                        <span></span>
                    </p>
                </li>
            </ul> -->
        </section>
        <div class="post">
            <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="发布" onclick="create()">
            <input class="btn" value="关闭" onclick="closing()">
        </div>
    </div>
</body>

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

javascript部分

   const showElement = document.getElementsByClassName("post")[0];

        function tijiao() {
            showElement.style.display = "block";
        }

        function closing() {
            showElement.style.display = "none";
        }
        //定义图片数组
        const imgArry = ["image/tou01.jpg", "image/tou02.jpg", "image/tou03.jpg", "image/tou04.jpg"];

        function create() {
            const inputzhi = document.getElementsByClassName("title")[0];
            //创建li标签
            const seElement = document.getElementById("se").firstElementChild;
            const liElement = document.createElement("li");
            seElement.appendChild(liElement);
            //创建img图片地址
            const index = Math.floor(Math.random() * 4);
            const imgUrl = imgArry[index];
            //创建 div标签
            const divElement = document.createElement("div");

            //创建图片标签
            const imgElement = document.createElement("img");
            imgElement.setAttribute("src", imgUrl);
            //将图片放入div中
            divElement.appendChild(imgElement);
            //标题放入h1
            const titleElement = document.getElementsByClassName("title")[0];
            const titleValue = titleElement.value;
            const h1Element = document.createElement("h1");
            h1Element.innerHTML = titleValue;
            //将类型放入
            const selectElement = titleElement.nextElementSibling;
            const selectValue = selectElement.value;
            //将文本域放入
            const textAreaElement = selectElement.nextElementSibling;
            const textAreaValue = textAreaElement.value;
            //创建时间
            const nowData = new Date();
            const nowyear = nowData.getFullYear();
            const nowmonth = nowData.getMonth() + 1;
            const nowday = nowData.getDate();
            const nowhours = nowData.getHours();
            const nowminute = nowData.getMinutes();
            const nowsecond = nowData.getSeconds();
            const nowtime = `时间：${nowyear}-${nowmonth}-${nowday} ${nowhours}:${nowminute}:${nowsecond}`;
            //将选择框 时间 文本域放入span
            const spanElement = document.createElement("span");
            spanElement.innerHTML = `版块：${selectValue} ${nowtime} 内容: ${textAreaValue}`;
            //创建 p标签
            const pElement = document.createElement("p");
            //将各元素放入ul中
            pElement.appendChild(spanElement);
            liElement.appendChild(divElement);
            liElement.appendChild(h1Element);
            liElement.appendChild(pElement);
            seElement.insertBefore(liElement, seElement.firstElementChild);
            closing();
        }

JS简易论坛发帖案例

一、实现过程

二、代码部分

猜你喜欢

热点阅读