©2020-2024 ioDraw All rights reserved
<>JS实现论坛发帖功能
简易思路：
先实现html页面大概各个模块样式。对应写出css【提前把即将用js代码创建的标签样式设置好。】
创建层级标签并设置具体属性【层级关系捋清楚】
以下为层级关系
<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; }
<>实现效果