效果

一、实现过程

由于重点是，所以html和css就不做过多介绍，文末会给出所有代码及资源。

首先实现思路是这样的：点击我要发帖按钮，弹出一个发帖框，发帖框有输入框，下拉框，还有文本域，再点击发布，内容会出现在我要发帖的下方。而点击我要发帖出现的发帖框是用:none;先默认隐藏，通过点击我要发帖改变其属性，使其变为:block;出现在页面上，而发帖框里的内容是通过节点动态添加到一个ul标签里。在这里说一下这个ul的布局，首先ul里面没有任何东西，ul里面的每一项都是动态添加，这里演示一下添加内容后的效果：

动态添加li

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

            所属版块：
            
                请选择版块
                电子书籍
                新课来了
                新手报到
                职业规划
            
            //内容
            
            
        

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

             

                

                    

                        
                    
                    
标题
                    

                        类型+发布时间+内容
                    
                
            

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

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

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

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

            //下拉框
            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);

            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部分

    
    
    


    

        

            我要发帖
        
        

            
        
        

            所属版块：
            
                请选择版块
                电子书籍
                新课来了
                新手报到
                职业规划
            
            
            
            
        
    

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

部分

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