制作论坛发帖页面（操作节点的方式）（JavaScript）

1. 任务要求如何创建节点元素？如何在指定节点之后插入节点元素？如何在指定节点之前插入节点元素？如何获取指定元素的值？如何设置元素的显示和隐藏？2. 需求说明制作显示如下图所示的京东回答页面，要求如下。（1）单击“我要发帖”按钮，弹出发帖页面，如下图所示；（2）在标题框中输入标题，选择所属板块，输入帖子内容；（3）单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示发帖者的头像、标题、所属

今天我学习

8843人浏览 · 2021-08-02 16:46:49

今天我学习 · 2021-08-02 16:46:49 发布

1. 任务要求

如何创建节点元素？
如何在指定节点之后插入节点元素？
如何在指定节点之前插入节点元素？
如何获取指定元素的值？
如何设置元素的显示和隐藏？

2. 需求说明

制作显示如下图所示的京东回答页面，要求如下。

（1）单击“我要发帖”按钮，弹出发帖页面，如下图所示；

（2）在标题框中输入标题，选择所属板块，输入帖子内容；

（3）单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示发帖者的头像、标题、所属板块和发布时间。如果标题、所属版块和内容的数据不合法，应有相应的提示框。

3. 实现思路

1）在“标题”和“留言版”文本框中显示提示文字，板块中选择板块，获得焦点时提示文字消失，失去焦点时若内容为空，则再次显示提示文字。

2）获取用户输入的“标题”、选择的板块和“留言内容”。

3）若用户输入了“标题”、选择的板块和“留言内容”，则创建一条留言，并显示在页面上面的留言板中。

4）将“标题”和“留言内容”文本框的value值设置为初始值。

4. 实现代码（js）

$(document).ready(function(e){
    $(".bbs header span").click(function(e){
       $(".post").show(); 
    });
    $(".btn").click(function(e){
		var date=new Date();
		var year=date.getYear();
		var month=date.getMonth()+1;
		var day=date.getDate();
		var hours=date.getHours();
		var minute=date.getMinutes();
        var images=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
		var id=Math.floor(Math.random()*4);
        var $div=$("<div><img src='img/"+images[id]+"'></div>");
        var $li=$("<li></li>");
        var $h1=$("<h1>"+$(".title").val()+"</h1>");
        var $p=$("<p>"+"<span>"+$(".content").val()+"</span>"+"<br>"+"<span>"+"板块："+$("#sel option:selected").val() 
		+"</span>"+"<span>"+"时间："+year+"-"+month+"-"+day+"-"+hours+":"+minute+"</span>"+"</p>");
        $li.append($div);
        $li.append($h1);
        $li.append($p);
        $("ul").append($li);
        $(".post").hide();
    });
});

5. 运行结果

6. 其他代码

.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>我要提问</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select id="sel"><option>请选择版块</option><option >电子书籍</option><option>生活用品</option><option>电子产品</option><option>儿童玩具</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bbs.js"></script>
</body>
</html>

.css

*{
	margin: 0; 
	padding: 0; 
	font-family: "Arial";
}
ul,li{
	list-style: none;
}
.bbs{
	margin: 0 auto; 
	width: 600px; 
	position: relative;
	background-image: url(../img/background5.jpg);//该图片为背景图，可自己更改
}
header{
	padding: 5px 0; 
	border-bottom: 1px solid #cecece;
}
header span{
	display:inline-block; 
	width: 220px; 
	height: 50px;
    color: #eb2711; 
    background: rgba(255,23,0,0.1); 
	border: #eb2711 solid 1px;
	font-size: 18px; 
    font-weight: bold; 
	text-align: center;
	line-height: 50px;
    border-radius: 8px; 
	cursor: pointer;
}
.post{
	position: absolute; 
	background: #ffffff; 
	border: 1px #999999 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 #aaaaaa solid; 
	margin-bottom: 10px;
}
.post select{
	width: 200px; 
	height: 30px;
}
.post .content{
	width: 450px; 
	height: 200px; 
	display: block; 
	margin: 10px 0;
	border: 1px #aaaaaa solid;
}
.post .btn{
	width: 160px; 
	height: 35px; 
	color: #eb2711; 
    background: rgba(255,23,0,0.1); 
	border: #eb2711 solid 1px; 
	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;
}