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

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

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

使用JS制作论坛发帖
需求说明: ①单击我要发帖,弹出发帖页面 ②在标题框中输入标题,选择所属版块,输入帖子内容 ③单击"发布"按钮,新发布的帖子显示在列表的第一个,新帖子显示头像.标题.版块和发布时间 ...
JavaScript练手题原生制作论坛发帖工具
直接上源代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
ASP.NET动态网站开发培训-41.互动论坛制作（九、制作管理员详细页面）
ASP.NET动态网站开发培训-41.互动论坛制作(九.制作管理员详细页面) 课程安排添加并设置两个数据源控件添加设置FormView控件添加设置DataList控件处理DataList控件的 ...
大数据NiFi（七）：NiFi集群页面管理节点操作
文章目录 NiFi集群页面管理节点操作一.断开节点二.卸载节点三.删除节点
站外营销经典方式之论坛发帖技巧
讲到论坛发帖,做营销的朋友的大概都不陌生,这是一种很古老的发帖方式了,最早的帖子发布大多是在论坛上发的,因为以前还没有现在这么多的自媒体平台,最早的帖子发布大概就是三种形式,那就是博客.论坛.自己的网 ...
论坛自动发帖php源码,小蜜蜂论坛发帖机推出phpwind论坛发帖机
小蜜蜂论坛发帖机推出phpwind论坛发帖机小蜜蜂论坛发帖机,小蜜蜂论坛自动发帖机,phpwind论坛发帖机小蜜蜂论坛发帖机,小蜜蜂论坛自动发帖机功能介绍在论坛发帖上,如果能有一款软件能定时按您 ...
phpwind9.0 read.php 修改,phpwind9.0模板制作教程——制作论坛风格
由于论坛模板机制和门户等模板机制不同,所以今天我就先重点讲讲论坛模板制作的大概过程. 一.先来熟悉下phpwind9.0的论坛模板机制. 其实phpwind9.0的模板机制和discuzx2.5差不多 ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
怎样用word制作标准格式公文操作实例
怎样用word制作标准格式公文操作实例下面,我们就以山东电建二公司<关于表彰2006年投产机组突破500万千瓦功臣集体和功臣个人的决定>这份公文为例,展示一下用word制作标准格式公文的 ...
鸿蒙HarmonyOS的初次使用––制作一登录页面，实现跳转(DevEcoStudio)
------用DevEcoStudio实现鸿蒙开发(制做登录页面,跑马灯,页面跳转,页面选择) 环境配置创建java项目运行模拟器代码部署 java代码 xml代码 layout目录下的xml文 ...

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

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

最新文章

热门文章