JavaScript简单实现论坛发帖(留言）

JavaScript简单实现论坛的发帖功能

PIKapikaaaa

9192人浏览 · 2022-03-25 01:45:20

PIKapikaaaa · 2022-03-25 01:45:20 发布

JS实现论坛发帖功能

简易思路：

先实现html页面大概各个模块样式。对应写出css【提前把即将用js代码创建的标签样式设置好。】

创建层级标签并设置具体属性【层级关系捋清楚】

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NrRITO6C-1648143703305)(C:\Users\12994\Desktop\论坛发帖.assets\image-20220325010621302.png)]$

以下为层级关系

 <ul id="postul">
             <li>
                <div>
                    <img src="images/tou01.jpg" >
                </div>
                <h1>
                    第一个帖子
                </h1>
                <p> 
                    板块信息： 吃撒   
                    <span>
                        发布时间： 吃撒
                    </span>
                </p>
            </li> 

            <li>
                <div>
                    <img src="images/tou01.jpg" >
                </div>
                <h1>
                    第一个帖子
                </h1>
                <p>
                    板块信息： 吃撒 
                    <span style="margin-left: 100px;">
                        发布时间： 吃撒   
                    </span>
                </p>
            </li>  
            
        </ul>

更具层级关系可以看出：
点击发布后，将每个帖子展示在ul列表中，每个帖子放到创建的li中：
li中要显示：——头像在div中使用——img加载图片——h1加载标题——p(span板块信息 span加载发布时间)

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

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="post()">我要发帖</span></header>
    <section>
        <ul id="postul"></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="title">
        所属版块：<select id="sec"><option selected>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content" id="content"></textarea>
        <input class="btn" value="发布" onclick="postSuccess()">
    </div>
</div>
</body>
</html>

JS代码实现

// 弹出 帖子输入的框---【去掉默认隐藏为显示，设置display = "block";】
	function post(){
		var inp = document.getElementsByClassName("post");
        inp[0].style.display = "block";
	}	 
        
// 点击发布
	function postSuccess(){
        //隐藏发布框
        var inp = document.getElementsByClassName("post");
        inp[0].style.display = "none";   
        
        // 创建li标签 		【并把li标签添加到ul列表下的首个子标签的位置】
		var newli=document.createElement("li");
        var ul = document.getElementById("postul");
        ul.insertBefore(newli,ul.firstChild);//【保证li当前添加的li标签始终在最上面】

        // 创建div标签 		并往li中添加div标签 
        var newdiv=document.createElement("div");
        newli.appendChild(newdiv);

        // 往div中添加图片 设置当前图片的路径
        var img=document.createElement("img");
        newdiv.appendChild(img);
        //随机取1-4的随机数
        var num = Math.floor(Math.random()*4+1);  
        //设置路径---通过setAttribute设置属性
        img.setAttribute("src","images/tou0"+num+".jpg");  

        // 在li中添加h1标签
        var h1=document.createElement("h1");
        newli.appendChild(h1);
        // 获取标题输入框中的内容
        var biao =  document.getElementById("title");
        h1.innerText=biao.value; //注意：因为input是单边标签，所以用.value获取
        
        // 在li中添加p标签 
        var newp=document.createElement("p");
        newli.appendChild(newp);

        // 获取所属板块中的内容
        var ban = document.getElementById("sec");
        // 把所选板块的信息写在p标签中
        newp.innerText = "模块信息："+ban.value;

        // 在p标签中添加span标签
        var span=document.createElement("span");
        newp.appendChild(span);

        // 给span标签设置外边框边距、距离标签100px
        span.style.marginLeft="100px";
        // 把日期写在span标签中
        span.innerText="发布时间 :  "+getTime();
	}

    function getTime(){
         // 1、获取当前的日期
         var date = new Date();
        var m = (date.getMonth()+1)>9?(date.getMonth()+1):"0"+(date.getMonth()+1);
        var min = (date.getMinutes())>9?(date.getMinutes()):"0"+(date.getMinutes());
        var se = (date.getSeconds())>9?(date.getSeconds()):"0"+(date.getSeconds);
        var cl = date.getFullYear()+"年"+m+"月"+date.getDate()+"日\t"+date.getHours()+"时"+min+"分"+date.getSeconds()+"秒";
        return cl;
    }